/* ==========================================================================
   Genesis Nail Salon - coming soon
   --------------------------------------------------------------------------
   Palette is SAMPLED from the supplied assets, not chosen from a mood board:
     video mean  #bca493   cream drape #d3bda9   rose clay #a67f70
     logo ink    #927c68 (deepened to #382a20 so body copy clears WCAG AA)

   Every ink value below was solved against the real composite (ambient still ->
   warm wash -> veil gradient), not eyeballed. Worst-case ratios in comments.

   Locks (kept consistent across the whole page):
     - one accent .......... --ink (deep cocoa). Buttons, focus rings, marks.
     - one radius scale .... --r-card 24px for the card, --r-ctl 12px for
                             every control. No third value anywhere.
     - single light theme .. no dark mode. color-scheme is pinned to "only
                             light" so the browser cannot auto-invert it.
   ========================================================================== */

/* ---------- Fonts (self-hosted variable woff2, latin subset) -------------- */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-latin.woff2') format('woff2-variations');
  font-weight: 300 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight-latin.woff2') format('woff2-variations');
  font-weight: 400 500;
  font-display: swap;
  font-style: normal;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* ink */
  --ink:        #382a20;
  --ink-2:      #4e3e33;      /* body   6.12:1 on the veil */
  --ink-3:      #624f44;      /* meta   4.64:1 on the veil */

  /* ground */
  --cream:      #f4ece4;
  --rose:       #dcc3b2;

  /* semantic */
  --veil:       linear-gradient(158deg,
                  rgb(248 241 234 / .90) 0%,
                  rgb(243 232 223 / .87) 46%,
                  rgb(230 205 189 / .84) 100%);
  --veil-solid: #f0e6dd;              /* reduced-transparency fallback */
  --on-veil:    var(--ink);
  --body:       var(--ink-2);
  --meta:       var(--ink-3);
  --hairline-2: rgb(56 42 32 / .09);

  --btn-bg:     var(--ink);
  --btn-fg:     #fbf5ef;
  --btn-bg-h:   #4a382b;


  /* shape lock */
  --r-card:     24px;
  --r-ctl:      12px;

  /* rhythm */
  --pad:        clamp(1.5rem, 1rem + 2.6vw, 3.75rem);

  --shadow:     0 2px 6px rgb(70 46 32 / .06),
                0 18px 40px rgb(70 46 32 / .13),
                0 48px 100px rgb(70 46 32 / .17);

  --ease:       cubic-bezier(.16, 1, .3, 1);

  color-scheme: only light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(.9375rem, .89rem + .2vw, 1rem);
  line-height: 1.62;
  color: var(--body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
p  { margin: 0; }
h1 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

.icon { width: 1em; height: 1em; flex: none; }

:where(a, button, input):focus-visible {
  outline: 2px solid var(--on-veil);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Ambient backdrop --------------------------------------------- */
/* Pre-blurred still + a warm wash. Fixed and inert, so it never repaints. */
.ambient {
  position: fixed;
  inset: -8%;
  z-index: -1;
  background:
    linear-gradient(196deg, rgb(226 189 163 / .30), rgb(126 82 58 / .46)),
    url('assets/img/ambient.jpg') center / cover no-repeat;
  transform: scale(1.06);
  pointer-events: none;
}
/* ---------- Stage + card ------------------------------------------------- */
.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, .3rem + 2vw, 3rem);
  padding-block: max(clamp(.75rem, .3rem + 2vw, 3rem), env(safe-area-inset-top))
                 max(clamp(.75rem, .3rem + 2vw, 3rem), env(safe-area-inset-bottom));
}

.card {
  position: relative;
  width: min(100%, 1360px);
  height: min(86dvh, 830px);
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  isolation: isolate;
}

/* ---------- Left panel --------------------------------------------------- */
.panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.25rem, .5rem + 2vw, 2.5rem);
  padding: var(--pad);
  background: var(--veil);
  backdrop-filter: blur(26px) saturate(115%);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
  /* inner edge highlight: reads as a real material rather than flat opacity */
  box-shadow: inset 1px 0 0 rgb(255 255 255 / .28),
              inset 0 1px 0 rgb(255 255 255 / .34);
  color: var(--on-veil);
  min-width: 0;
}
@media (prefers-reduced-transparency: reduce) {
  .panel { background: var(--veil-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- top bar --- */
.panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; }

/* The supplied mark is tan line art. Driving it through a CSS mask lets it
   take the ink colour, so it stays legible on cream and on cocoa alike. */
.brand__mark {
  width: 2.35rem;
  height: 2.8rem;
  background: currentColor;
  -webkit-mask: url('assets/img/genesis-mark.png') center / contain no-repeat;
          mask: url('assets/img/genesis-mark.png') center / contain no-repeat;
}

.brand__name {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding-left: .12em;
}/* --- body --- */
.panel__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, .8rem + 1.8vw, 2.25rem);
  min-width: 0;
}

.display {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 1.1rem + 4.6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--on-veil);
  text-wrap: balance;
}

.lede {
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.72;
  color: var(--body);
}

/* --- call to action --- */
.btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;              /* CTA never wraps */
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  border-radius: var(--r-ctl);
  padding: .78rem 1.35rem;
  text-decoration: none;
  transition: background-color .3s var(--ease), transform .18s var(--ease);
}
.btn:hover  { background: var(--btn-bg-h); }
.btn:active { transform: translateY(1px); }
.btn .icon  { font-size: .95rem; transition: transform .35s var(--ease); }
.btn:hover .icon { transform: translate(2px, -2px); }

/* --- footer --- */
/* Three slots: trading name, social, year. The name carries the brand, so the
   year slot stays bare rather than repeating it. */
.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(.75rem, .4rem + 1vw, 1.25rem);
  border-top: 1px solid var(--hairline-2);
}

.foot__legal {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--meta);
}
.foot__legal--end { text-align: right; }

.social { display: flex; gap: .35rem; }
.social a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.0625rem;
  color: var(--meta);
  border-radius: var(--r-ctl);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.social a:hover { color: var(--on-veil); background: rgb(56 42 32 / .07); }
/* ---------- Right showcase ----------------------------------------------- */
.showcase { position: relative; overflow: hidden; background: var(--rose); }

.showcase__film {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  /* fades up once the first frame is decodable, so poster -> video never pops */
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.showcase__film[data-ready] { opacity: 1; }

/* Logo over the film.
   First attempt used a cream mark, which measured 1.32:1 against this clip and
   vanished into the pearl. The clip is light (mean #bea99d), so the mark has to
   be DARK, not white: ink measures 3.64:1 worst case, clearing the 3:1 that
   WCAG asks of large non-text graphics. The two light drop-shadows are a halo,
   not a shadow, and hold that separation on the palest frames. */
.showcase__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(5rem, 9vw, 7.5rem);
  aspect-ratio: 440 / 528;
  background: var(--ink);
  -webkit-mask: url('assets/img/genesis-mark.png') center / contain no-repeat;
          mask: url('assets/img/genesis-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgb(255 253 250 / .92))
          drop-shadow(0 0 20px rgb(255 253 250 / .65));
}


/* ==========================================================================
   Motion - every animation below earns its place:
     card rise      -> arrival, establishes the card as the single object
     content stagger-> reading order, top to bottom
     film fade      -> state transition (poster to video)
   Hover and press transitions are feedback and live with their components.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise 1s var(--ease) both; }

  .panel__top,
  .display,
  .lede,
  .cta,
  .panel__foot { animation: lift .85s var(--ease) both; }

  .panel__top   { animation-delay: .16s; }
  .display      { animation-delay: .26s; }
  .lede         { animation-delay: .38s; }
  .cta          { animation-delay: .48s; }
  .panel__foot  { animation-delay: .58s; }

  .showcase__mark { animation: lift 1s var(--ease) .5s both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(.988); }
  to   { opacity: 1; transform: none; }
}
@keyframes lift {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet and below: one column. The film stops being a side panel and becomes
   the card's background, which is what a 9:16 clip actually wants to be. */
@media (max-width: 900px) {
  .card {
    grid-template-columns: 1fr;
    height: auto;
    min-height: min(92dvh, 780px);
  }

  /* The film stops being a side panel and becomes the card's background,
     which is what a 9:16 clip actually wants to be. */
  .showcase {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* No centred mark here: the brand bar at the top of the panel already sits
     over the film, and a second mark ghosts through behind the headline. */
  .showcase__mark { display: none; }

  /* Scrim, not a blanket.
     The previous version put a flat veil plus a 26px backdrop blur over the
     whole panel, which technically kept the film but flattened it into a
     smudge. Instead the scrim is dense only where text actually sits, and
     drops to near nothing in between, so a real window of film shows through.

       0-9%    behind the brand bar, dense
       9-38%   the window: film reads at close to full strength
       38-100% ramps back up behind headline, copy, CTA and footer

     No backdrop-filter here: it applies uniformly to the element and would
     blur the clear window along with everything else. */
  .panel {
    grid-row: 1;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .30);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg,
      rgb(247 240 233 / .93)  0%,
      rgb(247 240 233 / .86)  9%,
      rgb(247 240 233 / .12) 20%,
      rgb(247 240 233 / .10) 32%,
      rgb(246 237 229 / .70) 41%,
      rgb(245 235 226 / .92) 48%,
      rgb(243 232 223 / .95) 62%,
      rgb(238 224 213 / .96) 100%);
    --meta: var(--ink-2);
  }

  /* Content sits below the window rather than centred through it. */
  .panel__body {
    justify-content: flex-end;
    padding-block: clamp(1rem, 3vw, 2.5rem);
  }
}

@media (max-width: 900px) and (prefers-reduced-transparency: reduce) {
  .panel { background: var(--veil-solid); }
  .showcase { display: none; }
}

@media (max-width: 560px) {
  .stage { padding: 0; }
  .card {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    border-radius: 0;
  }
  .panel {
    gap: clamp(1rem, 3vw, 1.75rem);
    padding-block: max(var(--pad), calc(env(safe-area-inset-top) + 1rem))
                   max(var(--pad), calc(env(safe-area-inset-bottom) + 1rem));
  }
  .panel__body { gap: clamp(1.25rem, 4vw, 1.75rem); }

  .brand__name {
    font-size: 1rem;
    letter-spacing: .2em;
    white-space: nowrap;
  }  .btn { width: 100%; padding-block: .85rem; }
  .display { font-size: clamp(2.5rem, 1.5rem + 8vw, 3.5rem); }

  .panel__foot {
    flex-direction: column;
    gap: .85rem;
    text-align: center;
  }
  .foot__legal--end { text-align: center; }
}

/* Short landscape phones: give the copy room by dropping the supporting line */
@media (max-height: 460px) and (orientation: landscape) and (max-width: 900px) {
  .lede { display: none; }
}