/* The home page's parts after the first screen (element 14, 11 October 2026): part 2, the day
   (the BeReal way, looping phones); part 3, what it stands for; part 4, the close and the footer.
   Also used by the help and privacy pages for the footer. */

/* Starts below the bottom of the window, however tall: the first screen stops at 960 px, and
   the horizon's fading tail fills the space between (Conor: part 2 shouldn't show on the first screen). */
.day { position: relative; z-index: 1; padding: max(40px, calc(100svh - 960px + 40px)) var(--gutter) 0; }
.day-head { max-width: 1180px; margin: 0 auto 40px; }
.day-head .label { color: var(--copper); font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.day-head h2 { font: 900 clamp(38px, 5.6vw, 80px)/.95 var(--display); letter-spacing: -.045em; margin: 0; }

/* The phone, as on the first screen: a still of the app, no status bar. */
.mini { position: relative; aspect-ratio: 600 / 1304; border-radius: 15% / 7%; border: 8px solid #2C2F33; background: var(--ink); overflow: hidden; }
.mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* No cover strip over the top: the clips and their stills have the status bar painted out in the
   files themselves, and a page-coloured strip showed as a second tone over the video in some
   browsers (Conor, 12 October 2026). */
.mini::after { content: ""; position: absolute; left: 34.5%; width: 31%; top: 1.3%; height: 3.8%; border-radius: 999px; background: #000; z-index: 3; }
.illustrative { color: var(--stone); font-size: 13px; text-align: center; margin: 10px 0 0; }

.time { font: 900 clamp(64px, 9vw, 132px)/.9 var(--display); letter-spacing: -.05em; margin: 0 0 18px; }
.time small { display: block; font-size: .32em; letter-spacing: -.02em; margin-bottom: .2em; }

.day[hidden] { display: none; }
.after { min-height: 70vh; display: grid; place-items: center; color: var(--stone); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }



/* C: the BeReal way. One idea per screen on black, the phone and the words swapping sides,
   the phone's screen changing as you scroll, and the 8am and 8pm reminders on a lock screen. */
.scenes { max-width: 1180px; margin: 0 auto; }
.scene { position: relative; }
.scene.tall { height: 170vh; }
.scene .inner { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(32px, 7vw, 120px); padding: 80px 0 40px; }
.scene .words .label { color: var(--copper); font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; }
.scene .words h3 { font: 900 clamp(40px, 5vw, 72px)/.95 var(--display); letter-spacing: -.045em; margin: 0 0 20px; }
.scene .words p.line { color: #DCD6CB; font-size: clamp(17px, 1.5vw, 20px); margin: 0; max-width: 24em; }
.scene .holder { justify-self: center; perspective: 1400px; }
.scene .mini { height: min(76vh, 660px); container-type: inline-size; }
.scene .mini > .screen { position: absolute; inset: 0; transition: opacity .7s ease; }
.scene .mini > .screen.off { opacity: 0; }
.scene .mini picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene .illustrative { opacity: 0; transition: opacity .6s; }
.scene .illustrative.on { opacity: 1; }

/* The lock screen, drawn: the time, the date and the reminder. */
.lock { background: #121315; }   /* the same as the cover over the status bar, so no seam */
.lock canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ls-date { position: absolute; top: 15%; left: 0; right: 0; text-align: center; color: rgba(243,238,228,.85); font: 600 4.6cqw/1 var(--sans); }
.ls-time { position: absolute; top: 18.5%; left: 0; right: 0; text-align: center; color: var(--ivory); font: 700 24cqw/1 var(--display); letter-spacing: -.02em; }
.note { position: absolute; left: 5%; right: 5%; top: 44%; display: grid; grid-template-columns: 10cqw 1fr; gap: 3.4cqw; align-items: center;
  padding: 3.6cqw 4cqw; border-radius: 6cqw; background: rgba(52, 56, 61, .92); color: var(--ivory); text-align: left;
  transform: translateY(-14cqw) scale(.94); opacity: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.note.in { transform: none; opacity: 1; }
.note img { position: static; width: 10cqw; height: 10cqw; border-radius: 2.4cqw; display: block; }
.note .top { display: flex; justify-content: space-between; font: 600 3.6cqw/1.2 var(--sans); }
.note .top span { color: rgba(243,238,228,.6); font-weight: 400; }
.note p { margin: .6cqw 0 0; font: 400 3.6cqw/1.3 var(--sans); }

/* Words and phone arrive as they come into view. */
.scene .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.75,.25,1); }
.scene .reveal.in { opacity: 1; transform: none; }
.scene .holder.reveal { transition-delay: .12s; }

@media (max-width: 640px) {
  .scene .inner { grid-template-columns: 1fr; align-content: center; gap: 28px; padding: 88px 0 32px; text-align: center; }
  .scene .holder { order: 2; }   /* words first, then the phone */
  .scene .words p.line { margin: 0 auto; }
  .scene .mini { height: auto; width: min(66vw, 300px); }
}
@media (prefers-reduced-motion: reduce) { .scene .reveal, .note { transition: none; } }

/* Headline full stops in Copper, like the logo's dot (Conor); on the Copper card they stay Ink. */
.fineprint { max-width: 1180px; margin: 0 auto; padding: 8px 0 24px; color: var(--stone); font-size: 12px; opacity: .8; }

/* The looping app clips (option C). */
.app img, .app video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.app video { opacity: 0; transition: opacity .12s linear; }
.app video.playing { opacity: 1; }
.app { transition: opacity .3s ease; }
.app.off { opacity: 0; }   /* fades only: scaling it would shift the picture inside the phone */
.app.fade { opacity: 0; transform: none; }
.lock { transition: opacity .5s ease; }
.lock.off { opacity: 0; }
.note.pressed { transform: scale(.96); transition: transform .18s ease; }
.mini.instant, .mini.instant * { transition: none !important; }
.scene .holder { perspective: 1600px; }
/* The flip between loops (Conor): edge-on, reset unseen, then back. */
.scene .mini { transition: transform .56s cubic-bezier(.15,.65,.25,1); }
.scene .mini.flip-out { transform: rotateY(90deg); transition: transform .42s cubic-bezier(.55,0,.85,.35); }
.scene .mini.flip-from { transform: rotateY(-90deg); }

/* Part 3, the principles (11 October 2026). A: a statement that lights up word by word as you
   scroll, then the principles in a row. B: one principle per screen, BeReal-calm. */
.p3 { position: relative; z-index: 1; padding: 12vh var(--gutter) 6vh; }
.p3[hidden] { display: none; }
.p3 .inner { max-width: 1180px; margin: 0 auto; }
.p3 .label { color: var(--copper); font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }

.statement { font: 900 clamp(40px, 5.8vw, 84px)/1.02 var(--display); letter-spacing: -.045em; margin: 0 0 14vh; max-width: 16em; }
.statement .w { color: rgba(243, 238, 228, .16); transition: color .35s ease; }
.statement .w.lit { color: var(--ivory); }
.statement .w .dot { color: inherit; }
.statement .w.lit .dot { color: var(--copper); }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); border-top: 1px solid rgba(243, 238, 228, .12); padding-top: 36px; }
.principle h3 { font: 800 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 12px; }
.principle p { color: #DCD6CB; font-size: 17px; margin: 0; }
.principle .num { display: block; color: var(--copper); font: 800 15px/1 var(--sans); letter-spacing: .14em; margin-bottom: 16px; }


@media (max-width: 860px) { .principles { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 520px) { .principles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .statement .w { color: var(--ivory); } }

/* Part 4, the close and the footer (11 October 2026): the app's own layout (the Q, the horizon
   below it, then the words), so the page ends the way the app opens. */
/* Exactly the space above the footer, content centred: at the bottom of the page the whole close
   shows with the footer beneath it, the Q never cut off and no dead space (Conor). */
.closing { position: relative; z-index: 1; min-height: calc(100vh - var(--foot-h, 140px)); min-height: calc(100svh - var(--foot-h, 140px));
  overflow: hidden; padding: 64px var(--gutter) 56px; display: grid; align-content: center; }
.closing[hidden] { display: none; }
.closing canvas { position: absolute; left: 0; width: 100%; pointer-events: none; }
.closing .close-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; }
.closing .label { color: var(--copper); font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.closing .label .short { display: none; }
.closing .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.closing .platforms { color: var(--stone); font-size: 14px; margin: 14px 0 0; }
.closing .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.75,.25,1); }
.closing .reveal.in { opacity: 1; transform: none; }

.close-a .mark { display: block; width: 72px; height: 72px; margin: 0 auto; }
.close-a .below { padding-top: var(--below, 180px); }
.close-a h2 { font: 900 clamp(48px, 7vw, 104px)/.95 var(--display); letter-spacing: -.045em; margin: 0 0 32px; }


.site-foot { position: relative; z-index: 1; padding: 40px var(--gutter) 32px; border-top: 1px solid rgba(243, 238, 228, .1); background: var(--ink); }
.site-foot .foot-inner, .site-foot .foot-base { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-foot .brand img { height: 22px; }
.foot-links { display: flex; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.foot-links a { color: var(--ivory); text-decoration: none; opacity: .85; }
.foot-links a:hover { opacity: 1; }
.site-foot .foot-base { margin-top: 28px; color: var(--stone); font-size: 13px; }

@media (max-width: 520px) { .closing .label { font-size: 13px; letter-spacing: .1em; } .closing .label .long { display: none; } .closing .label .short { display: inline; } .closing .actions .btn { flex: 1 1 100%; } .site-foot .foot-inner { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .closing .reveal { opacity: 1; transform: none; } }

/* "How it works" lands on its heading, clear of the fixed top bar, with a smooth scroll. */
#how { scroll-margin-top: 110px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Pause for the looping phones (Codex review, 12 October 2026): one small round button under each
   phone, at its right edge, as on Apple's own pages. Any of them pauses all the page's motion.
   Not shown when the device already asks for less motion (nothing moves then). */
.scene .motion { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 14px 0 0 auto; padding: 0;
  border: 0; border-radius: 50%; background: rgba(243, 238, 228, .1); color: var(--ivory); cursor: pointer; transition: background .2s; }
.scene .motion:hover { background: rgba(243, 238, 228, .18); }
.scene .motion:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.scene .motion svg { width: 14px; height: 14px; fill: currentColor; }
.scene .motion .i-play, .paused .scene .motion .i-pause { display: none; }
.paused .scene .motion .i-play { display: block; }
@media (prefers-reduced-motion: reduce) { .scene .motion { display: none; } }