/* Compy — coming soon. Colours are the app's rose ramp (Companion.Mobile/src/theme/tokens.ts). */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter.woff2') format('woff2');
}

:root {
  --rose-100: #f6e0e2;
  --rose-200: #ebbec3;
  --rose-300: #dc97a0;
  --rose-500: #a8404f;
  --ink: #1c0a12;
  --cream: #fbf1f2;
  --gold: #f6c28b;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Depth of field: blur scales with the screen so it reads the same on a phone and a 4K monitor. */
  --blur-room: clamp(10px, 1.15vmax, 26px);
  --blur-mid: clamp(7px, .8vmax, 18px);
  --blur-fore: clamp(22px, 2.6vmax, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;            /* one screen, no scroll */
  background: var(--ink);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ Scene */

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
  animation: scene-in 2.6s var(--ease-out) both;
}

.scene__drift {
  position: absolute;
  inset: 0;
  animation: drift 48s ease-in-out infinite alternate;
  will-change: transform;
}

/* 16:9 stage that covers the viewport; every layer inside shares its coordinates. */
.scene__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  /* Nudged down so the couple sits below the headline, not behind it. */
  transform: translate(-50%, -44%) scale(1.08);
}

/* Portrait: show more of the room (both people) and let the wall fill the top. */
@media (max-aspect-ratio: 1/1) {
  .scene__frame {
    top: auto;
    bottom: 0;
    width: max(100vw, 118vh);
    transform: translate(-50%, 4%) scale(1.08);
  }
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.layer--room   { filter: blur(var(--blur-room)) saturate(1.1); }
.layer--person { filter: blur(var(--blur-mid)); will-change: transform; }
.layer--table  { filter: blur(var(--blur-mid)); }
.layer--fore   { filter: blur(var(--blur-fore)); opacity: .9; }
.layer--bokeh  { mix-blend-mode: screen; }

/* The two of them lean in and out of the conversation, slightly out of step. */
.layer--a { transform-origin: 38% 73%; animation: lean-a 9s ease-in-out infinite; }
.layer--b { transform-origin: 62% 73%; animation: lean-b 11s ease-in-out infinite; animation-delay: -3s; }

.lamp-glow   { animation: glow 7s ease-in-out infinite; transform-origin: 800px 250px; }
.candle-glow { animation: flicker 3.2s ease-in-out infinite; transform-origin: 800px 560px; }

.bk {
  transform-box: fill-box;
  transform-origin: center;
  animation: float var(--d) linear infinite;
  animation-delay: var(--t);
}

/* Legibility: vignette, plus a soft pool of shadow behind the headline. */
.scene__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 42% at 50% 48%, rgba(20, 6, 12, .48), transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(12, 4, 8, .82) 100%),
    linear-gradient(to bottom, rgba(18, 6, 11, .6), transparent 22%, transparent 74%, rgba(18, 6, 11, .75));
}

/* Film grain. */
.scene__grain {
  position: absolute;
  inset: -50%;
  opacity: .09;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

/* ------------------------------------------------------------------ Content */

.stage {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding:
    max(28px, env(safe-area-inset-top)) clamp(24px, 4.5vw, 64px)
    max(24px, env(safe-area-inset-bottom));
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: rise 1.4s var(--ease-out) .5s both;
}

.brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.brand__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 36;
}

.hero {
  align-self: center;
  justify-self: center;
  text-align: center;
  /* Landscape: above the couple. Portrait overrides this below. */
  margin-bottom: 30vh;
}

@media (max-aspect-ratio: 1/1) {
  .hero { margin-bottom: 6vh; }
}

.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 11.5vw, 10.5rem);
  line-height: .95;
  letter-spacing: -.035em;
  font-variation-settings: 'opsz' 144;
  color: var(--cream);
  text-shadow: 0 2px 40px rgba(20, 6, 12, .45);
  animation: rise 1.8s var(--ease-out) .8s both;
}

.hero__title em {
  font-style: italic;
  font-weight: 300;
  padding-right: .04em;
  background: linear-gradient(100deg, var(--rose-100) 0%, var(--rose-300) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Three "typing" dots, borrowed from the app icon. */
.hero__dots {
  display: inline-flex;
  gap: .09em;
  margin-left: .1em;
  vertical-align: baseline;
}

.hero__dots i {
  width: .085em;
  height: .085em;
  border-radius: 50%;
  background: var(--rose-300);
  animation: typing 1.5s ease-in-out infinite;
}
.hero__dots i:nth-child(2) { animation-delay: .18s; }
.hero__dots i:nth-child(3) { animation-delay: .36s; }

.hero__lede {
  margin: clamp(18px, 3vh, 32px) auto 0;
  max-width: 34ch;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.25vw + .45rem, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .005em;
  color: rgba(251, 241, 242, .74);
  animation: rise 1.8s var(--ease-out) 1.05s both;
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251, 241, 242, .5);
  animation: fade 2s ease 1.5s both;
}

/* ------------------------------------------------------------------ Motion */

@keyframes scene-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}
@keyframes drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -.8%, 0); }
}
@keyframes lean-a {
  0%, 100% { transform: rotate(0deg); }
  45%      { transform: rotate(1.6deg) translateX(.3%); }
  60%      { transform: rotate(1.2deg) translateX(.2%); }
}
@keyframes lean-b {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-1.3deg); }
  55%      { transform: rotate(.8deg) translateY(-.2%); }
}
@keyframes glow {
  0%, 100% { opacity: .9; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.04); }
}
@keyframes flicker {
  0%, 100% { opacity: .85; transform: scale(1); }
  20%      { opacity: 1;   transform: scale(1.05); }
  40%      { opacity: .78; transform: scale(.97); }
  70%      { opacity: .95; transform: scale(1.02); }
}
@keyframes float {
  0%   { transform: translate(0, 0) scale(.9);     opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(18px, -60px) scale(1.05); }
  85%  { opacity: 1; }
  100% { transform: translate(-10px, -130px) scale(.9); opacity: 0; }
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(-1%, 1%); }
}
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0);     opacity: .45; }
  30%           { transform: translateY(-.06em); opacity: 1; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }
  .bk { opacity: .8; }
}

@media (max-width: 520px) {
  .foot { font-size: .68rem; letter-spacing: .12em; }
  .brand__name { font-size: 1.3rem; }
}