/* ============================================================
   Yeliz Cosmetics — Brand Gateway (choice page)
   Self-contained: reuses the site's brand tokens, fonts and
   motion vocabulary so the entry feels native to the Studio
   site, while standing on its own (does not load styles.css).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

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

:root {
  /* brand tokens — mirror assets/styles.css */
  --bg-cream:  #F4EFE6;
  --bg-card:   #FAF6EE;
  --bg-deep:   #EAE2D2;
  --ink:       #1A1715;
  --ink-soft:  #5C544D;
  --ink-muted: #8B8278;
  --sage:      #7C8266;
  --sage-deep: #5F6450;
  --cream-warm:#EFEADD;   /* body text on sage */
  --sage-mist: #C7CDB8;   /* labels on sage */
  --gold:      #B7956A;
  --line:      #D9D0BF;
  --label-studio:  #6B6157;  /* muted label — passes AA on cream */
  --label-academy: #DDE2D4;  /* light label — passes AA on sage  */

  /* 4pt spacing scale */
  --space-xs: 8px;  --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 220ms; --dur-medium: 420ms; --dur-slow: 720ms; --dur-luxe: 1100ms;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  color: var(--ink-soft);
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.gateway__sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the split ---------- */
.gateway {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}
.gate {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow var(--dur-slow) var(--ease-out-expo);
  cursor: pointer;
}

/* photo + wash (URL injected per-panel from HTML via --photo) */
.gate__photo {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(var(--ps, 1.05));
  transition: transform var(--dur-slow) var(--ease-out-expo),
              filter var(--dur-slow) var(--ease-out-quart),
              opacity var(--dur-slow) var(--ease-out-quart);
}
.gate--studio .gate__photo {
  background-color: var(--bg-cream);
  background-image:
    radial-gradient(125% 85% at 50% 22%, rgba(244,239,230,.34), rgba(244,239,230,.78) 72%),
    linear-gradient(180deg, rgba(244,239,230,.60), rgba(234,226,210,.74)),
    var(--photo, none);
}
.gate--academy .gate__photo {
  background-color: var(--sage-deep);
  /* Wash floor kept dark so light real photos can't sink text contrast. */
  background-image:
    radial-gradient(125% 85% at 50% 22%, rgba(70,74,58,.42), rgba(40,43,32,.82) 74%),
    linear-gradient(180deg, rgba(70,74,58,.80), rgba(34,37,27,.92)),
    var(--photo, none);
}

/* content stack */
.gate__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(var(--space-lg), 2.4vw, var(--space-2xl));
  max-width: 28rem;
}
.gate--studio  .gate__inner { color: var(--ink); }
.gate--academy .gate__inner { color: var(--cream-warm); }

.gate__index {
  font-size: .7rem; letter-spacing: .36em; text-transform: uppercase; font-weight: 500;
}
.gate--studio  .gate__index { color: var(--label-studio); }
.gate--academy .gate__index { color: var(--label-academy); }

.gate__logo { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.gate__logo-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500; font-style: italic;
  font-size: clamp(3.25rem, 7vw, 5.5rem);
  line-height: .85; letter-spacing: -.015em;
}
/* Logo image (e.g. YC monogram) — sized for presence next to the wordmark */
.gate__logo-img { width: auto; height: clamp(4rem, 8vw, 6.25rem); }
.gate__logo-img--light { filter: brightness(0) invert(1); } /* black monogram → white for the dark panel */
.gate__logo-sub {
  font-size: .74rem; letter-spacing: .44em; text-transform: uppercase; font-weight: 400;
  padding-left: .44em; /* optical balance for trailing letter-spacing */
}
.gate--studio  .gate__logo-sub { color: var(--label-studio); }
.gate--academy .gate__logo-sub { color: var(--label-academy); }

.gate__desc { font-size: 1rem; line-height: 1.7; max-width: 30ch; overflow-wrap: anywhere; hyphens: auto; }
.gate--studio  .gate__desc { color: var(--ink-soft); }
.gate--academy .gate__desc { color: var(--cream-warm); line-height: 1.78; }

/* CTA */
.gate__cta {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 500;
  padding-bottom: 10px; position: relative;
}
.gate--studio  .gate__cta { color: var(--ink); }
.gate--academy .gate__cta { color: var(--bg-card); }
.gate__cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(.42); transform-origin: left center;
  transition: transform var(--dur-medium) var(--ease-out-expo);
}
.gate__cta svg { transition: transform var(--dur-medium) var(--ease-out-expo); }

/* hover / focus */
@media (hover: hover) and (pointer: fine) {
  .gate__photo { will-change: transform; }
  .gate:hover { flex-grow: 1.32; }
  .gateway:hover .gate:not(:hover) .gate__photo {
    filter: saturate(.55) brightness(.98); opacity: .82; --ps: 1.09;
  }
}
.gate:hover .gate__cta::after,
.gate:focus-visible .gate__cta::after { transform: scaleX(1); }
.gate:hover .gate__cta svg,
.gate:focus-visible .gate__cta svg { transform: translateX(6px); }
.gate:focus-visible { outline: 2px solid var(--gold); outline-offset: -12px; }
.gate--studio:focus-visible { outline-color: var(--ink); } /* gold ring fails 3:1 on cream */

/* seam + medallion */
.gate__seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--line); transform: translateX(-50%); z-index: 2; pointer-events: none;
}
.gate__medallion {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: grid; place-items: center;
  width: clamp(56px, 6.5vw, 74px); aspect-ratio: 1; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(124,130,102,.10), 0 16px 34px -16px rgba(26,23,21,.45);
  overflow: hidden; /* keep a failed monogram from spilling outside the disc */
  pointer-events: none;
}
.gate__medallion img { width: 50%; opacity: .9; }

/* grain (matches styles.css body::before) */
.gateway::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.42  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* entrance choreography — hidden only when JS present (no-JS shows all) */
.js .gate__index, .js .gate__logo, .js .gate__desc, .js .gate__cta,
.js .gate__seam, .js .gate__medallion { opacity: 0; }

@keyframes gate-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes gate-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes med-pop  { from { opacity: 0; transform: translate(-50%,-50%) scale(.72); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

.is-loaded .gate__index, .is-loaded .gate__logo,
.is-loaded .gate__desc, .is-loaded .gate__cta { animation: gate-rise var(--dur-slow) var(--ease-out-quart) both; }
.is-loaded .gate__seam { animation: gate-fade var(--dur-luxe) var(--ease-out-quart) 200ms both; }
.is-loaded .gate__medallion { animation: med-pop var(--dur-slow) var(--ease-out-expo) 640ms both; }

.is-loaded .gate--studio  .gate__index { animation-delay: 220ms; }
.is-loaded .gate--studio  .gate__logo  { animation-delay: 320ms; }
.is-loaded .gate--studio  .gate__desc  { animation-delay: 420ms; }
.is-loaded .gate--studio  .gate__cta   { animation-delay: 520ms; }
.is-loaded .gate--academy .gate__index { animation-delay: 320ms; }
.is-loaded .gate--academy .gate__logo  { animation-delay: 420ms; }
.is-loaded .gate--academy .gate__desc  { animation-delay: 520ms; }
.is-loaded .gate--academy .gate__cta   { animation-delay: 620ms; }

/* responsive: keep the vertical split (Studio left | Academy right) on phones,
   tightened so the editorial stack reads well in the narrow columns. */
@media (max-width: 767.98px) {
  .gate { padding: clamp(0.85rem, 4vw, 2rem); }
  .gate__inner { gap: clamp(var(--space-md), 3.4vw, var(--space-xl)); max-width: 22rem; }
  .gate__index { font-size: .58rem; letter-spacing: .18em; }
  .gate__logo-name { font-size: clamp(2.1rem, 12vw, 3.6rem); }
  .gate__logo-img { height: clamp(2.9rem, 13vw, 4.1rem); }
  .gate__logo-sub { font-size: .6rem; letter-spacing: .26em; padding-left: .26em; }
  .gate__desc { font-size: .82rem; line-height: 1.58; }
  .gate--academy .gate__desc { line-height: 1.62; }
  .gate__cta { font-size: .62rem; letter-spacing: .14em; gap: var(--space-xs); padding-bottom: 8px; flex-wrap: wrap; justify-content: center; }
  /* the centered monogram would overlap the close-set columns — seam alone divides on mobile */
  .gate__medallion { display: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important;
  }
  .gate__index, .gate__logo, .gate__desc, .gate__cta,
  .gate__seam, .gate__medallion { opacity: 1 !important; }
  .gate__photo { transform: none !important; }
}