/* ══════════════════════════════════════════════════════════════════════
   Symvolia — Cinematic Eye Opening
   One continuous breath: void → lids → iris → settle → brand → enter → home
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --void: #010101;
  --intro-core-scale: 1;
  --iris-gold: #c4922a;
  --color-text: rgba(255, 252, 245, 0.92);
  --ease-cine: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-mass: cubic-bezier(0.33, 0.05, 0.15, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-close: cubic-bezier(0.55, 0.05, 0.85, 0.35);
  --dur-lid: 2800ms;
  --dur-reveal: 2400ms;
  --dur-settle: 1600ms;
  --dur-pupil: 1200ms;
}

html,
body {
  background: var(--void) !important;
}

html.loading,
html.is-cine {
  overflow: hidden;
}

html.loading body,
html.is-cine body {
  overflow: hidden;
  cursor: none;
}

html.loading .cine,
html.loading .stage,
html.loading .main,
html.loading .sound-toggle,
html.loading .scroll-progress {
  visibility: hidden !important;
  opacity: 0 !important;
}

html.is-cine .stage,
html.is-cine .main,
html.is-cine .scroll-progress {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html.is-cine .sound-toggle {
  opacity: 0.4;
  pointer-events: auto;
  cursor: pointer;
  z-index: 10050;
}

/* ── Shell ── */
.cine.intro-scene,
.cine {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--void);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms var(--ease-soft);
}

.cine.is-shown {
  opacity: 1;
  visibility: visible;
}

.cine.is-done {
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease-soft);
}

.cine__vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 58% 50% at 50% 50%,
      transparent 12%,
      rgba(1, 1, 1, 0.28) 52%,
      rgba(1, 1, 1, 0.88) 100%
    );
  transition: opacity 1400ms var(--ease-soft);
}

.cine__vignette.is-shown {
  opacity: 1;
}

.eye__noise-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  transition: opacity 1800ms var(--ease-soft);
}

.cine.is-grain .eye__noise-layer {
  opacity: 0.11;
}

/* ── Eye container ── */
.eye-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--ease-soft);
}

.eye-container.is-shown {
  opacity: 1;
  visibility: visible;
}

.eye__void {
  position: absolute;
  inset: 0;
  background: var(--void);
  z-index: 0;
}

/* Stage: locked to true page center */
.eye__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(100vw, 1540px);
  aspect-ratio: 800 / 600;
  height: auto;
  display: grid;
  place-items: center;
  /* Fixed size — no open/settle zoom (avoids clipping the frame) */
  transform: translate(-50%, calc(-50% - 2.5cm)) scale(0.98);
  transform-origin: center center;
  transition: transform var(--dur-settle) var(--ease-cine);
  will-change: transform;
}

.eye-container.is-settled .eye__stage {
  transform: translate(-50%, calc(-50% - 2.5cm)) scale(0.98);
}

.eye-container.is-closing .eye__stage {
  transform: translate(-50%, calc(-50% - 2.5cm)) scale(0.98);
  transition-duration: 700ms;
  transition-timing-function: var(--ease-close);
}

/* Breathe lives on its own layer — never fights settle scale */
.eye__breathe {
  width: 100%;
  height: 100%;
  transform: scale(1);
  will-change: transform;
}

.eye-container.is-breathing:not(.is-closing) .eye__breathe {
  animation: eye-breathe 6s var(--ease-soft) infinite;
}

@keyframes eye-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.012);
  }
}

.eye__assembly {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--ease-cine);
}

.eye-container.is-shown .eye__assembly,
.eye-container.is-open .eye__assembly {
  opacity: 1;
  filter: contrast(1.28) brightness(1.08);
}

.eye-container.is-closing .eye__assembly {
  opacity: 0.15;
  filter: contrast(1) brightness(0.4);
  transition-duration: 650ms;
  transition-timing-function: var(--ease-close);
}

/* Vector eye inspired by reference — no raster */
.eye__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.eye__lightning path {
  mix-blend-mode: screen;
  stroke: #ffffff !important;
}

.eye__brush path {
  mix-blend-mode: soft-light;
}

/* Seal + corona locked to 148px disc (r74 @ 400,300) */
.eye__art .eye__seal {
  opacity: 0;
  transform: scale(0.2);
  transform-origin: 400px 300px;
  transform-box: view-box;
  filter: blur(10px);
  transition:
    opacity 1600ms var(--ease-cine),
    transform 1600ms var(--ease-cine),
    filter 1600ms var(--ease-cine);
}

.eye__art .eye__seal image {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
  transition: filter 1600ms var(--ease-cine);
}

.eye__art .eye__sun {
  transform: scale(var(--intro-core-scale));
  transform-origin: 400px 300px;
  transform-box: view-box;
  transition: transform 1600ms var(--ease-cine);
}

.eye-container.is-seal .eye__art .eye__seal {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.eye-container.is-closing .eye__art .eye__seal {
  opacity: 0;
  transform: scale(0.35);
  filter: blur(8px);
  transition-duration: 450ms;
}

/* ── Eyelids ── */
.eye__lids {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.eye__lid {
  position: absolute;
  left: 0;
  right: 0;
  height: 58%;
  transition: transform var(--dur-lid) var(--ease-mass);
  will-change: transform;
}

.eye__lid svg {
  display: block;
  width: 100%;
  height: 100%;
}

.eye__lid--upper {
  top: 0;
  transform: translate3d(0, 0, 0);
}

.eye__lid--lower {
  bottom: 0;
  transform: translate3d(0, 0, 0);
}

/* Fully reveal the painted eye — lids leave the frame */
.eye-container.is-open:not(.is-closing) .eye__lid--upper {
  transform: translate3d(0, -100%, 0);
}

.eye-container.is-open:not(.is-closing) .eye__lid--lower {
  transform: translate3d(0, 100%, 0);
  transition-delay: 160ms;
}

/* Closing must win over open without removing is-open */
.eye-container.is-closing .eye__lid--upper {
  transform: translate3d(0, 0, 0);
  transition-duration: 680ms;
  transition-delay: 0ms;
  transition-timing-function: var(--ease-close);
}

.eye-container.is-closing .eye__lid--lower {
  transform: translate3d(0, 0, 0);
  transition-duration: 680ms;
  transition-delay: 60ms;
  transition-timing-function: var(--ease-close);
}

/* ── Brand — centered under the eye, same page axis ── */
.cine__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  transform: translate(-50%, calc(min(34vmin, 270px) - 3.5cm + 12px));
  pointer-events: none;
  text-align: center;
  opacity: 0;
  width: min(94vw, 40rem);
  transition:
    opacity 1000ms var(--ease-soft),
    transform 1000ms var(--ease-cine);
}

.cine.is-brand .cine__brand {
  opacity: 1;
  transform: translate(-50%, calc(min(34vmin, 270px) - 3.5cm));
}

.cine__mark {
  display: none; /* homepage seal is the pupil — no second logo here */
}

.cine__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cine__wordmark {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.15rem, 5.9vw, 3.3rem);
  letter-spacing: 0.02em;
  text-indent: 0;
  text-transform: uppercase;
  color: rgba(255, 248, 238, 0.92);
  white-space: nowrap;
}

.cine__letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  letter-spacing: 0;
}

.cine__tagline {
  margin: 0.4rem 0 0;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

/* Match homepage .stage__tagline span */
.cine__tagline span {
  display: inline-block;
  font-family: var(--font-elegant);
  font-size: clamp(0.95rem, 2.8vw, 1.2rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0.75;
  text-shadow:
    0 0 36px rgba(70, 60, 50, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 0 18px rgba(255, 255, 255, 0.06);
}

.cine__mark.is-shown,
.cine__letter.is-shown,
.cine__tagline.is-shown {
  visibility: visible;
}

/* ── Enter ── */
.cine__enter {
  position: absolute;
  left: 50%;
  bottom: max(6.5vh, 2.2rem);
  z-index: 9;
  transform: translate3d(-50%, 14px, 0) scale(0.96);
  opacity: 0;
  visibility: hidden;
  appearance: none;
  border: 1px solid rgba(196, 146, 42, 0.32);
  background: rgba(1, 1, 1, 0.4);
  color: rgba(255, 248, 238, 0.88);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  padding: 0.85rem 1.85rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out),
    border-color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease;
}

.cine__enter.is-shown,
.cine__enter.is-visible {
  visibility: visible;
}

.cine__enter.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
  box-shadow: 0 0 28px rgba(196, 146, 42, 0.08);
}

.cine__enter:hover,
.cine__enter:focus-visible {
  border-color: rgba(196, 146, 42, 0.72);
  background: rgba(20, 14, 10, 0.55);
  box-shadow: 0 0 36px rgba(196, 146, 42, 0.16);
  outline: none;
}

.cine__enter-label--tap {
  display: none;
}

@media (pointer: coarse) {
  .cine__enter-label--desk {
    display: none;
  }
  .cine__enter-label--tap {
    display: inline;
  }
}

/* ── Iris wipe → homepage (same void + same center as pupil/sigil) ── */
.cine__wipe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, #12100e 0%, #010101 55%, #010101 100%);
  transform: scale(0);
  opacity: 0;
  z-index: 12;
  pointer-events: none;
  will-change: transform, opacity;
}

.cine__cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(196, 146, 42, 0.5);
  box-shadow: 0 0 14px rgba(196, 146, 42, 0.3);
  pointer-events: none;
  z-index: 10060;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 400ms ease;
}

/* Reduced motion */
.cine--static .eye__assembly,
.cine--static .pupil-base,
.cine--static .pupil-depth,
.cine--static .eye__stage,
.cine--static .eye__breathe {
  transition: none !important;
  animation: none !important;
}

.cine--static .eye__lid {
  transition: none !important;
}

@media (max-width: 820px) {
  .eye-container {
    /* +3cm on corona diameter (170 SVG units at 100vw) */
    --intro-core-scale: calc(min(1.9, 100vw / 215px) + (3cm * 800 / (170 * 100vw)));
  }

  .eye__art .eye__iris-glow,
  .eye__art .eye__limbal {
    opacity: 0;
  }

  .eye__art .eye__socket {
    clip-path: url(#eyeAlmondOpen);
  }

  .eye__stage {
    width: 100vw;
    aspect-ratio: 800 / 600;
    height: auto;
    transform: translate(-50%, calc(-50% - 1.5rem)) scale(1);
  }

  .eye-container.is-settled .eye__stage,
  .eye-container.is-closing .eye__stage {
    transform: translate(-50%, calc(-50% - 1.5rem)) scale(1);
  }

  .eye__lid {
    height: 54%;
  }

  .eye-container.is-open:not(.is-closing) .eye__lid--upper {
    transform: translate3d(0, -108%, 0);
  }

  .eye-container.is-open:not(.is-closing) .eye__lid--lower {
    transform: translate3d(0, 108%, 0);
  }

  .eye__art .eye__seal image {
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.45));
  }

  .cine__brand {
    transform: translate(-50%, calc(min(36vmin, 240px) + 0.5cm - 1.5rem + 10px));
  }

  .cine.is-brand .cine__brand {
    transform: translate(-50%, calc(min(36vmin, 240px) + 0.5cm - 1.5rem));
  }
}

@media (max-width: 640px) {
  .eye-container {
    --intro-core-scale: calc(min(2.35, 100vw / 166px) + (3cm * 800 / (170 * 100vw)));
  }

  .eye__stage {
    transform: translate(-50%, calc(-50% - 1.75rem)) scale(1);
  }

  .eye-container.is-settled .eye__stage,
  .eye-container.is-closing .eye__stage {
    transform: translate(-50%, calc(-50% - 1.75rem)) scale(1);
  }

  .eye__lid {
    height: 50%;
  }

  .eye__art .eye__seal image {
    filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.55));
  }

  .eye-container.is-seal .eye__art .eye__seal {
    transform: scale(1);
  }

  .eye-container.is-closing .eye__art .eye__seal {
    transform: scale(0.38);
  }

  .cine__brand {
    width: min(94vw, 26rem);
    padding: 0 0.5rem;
    gap: 0.4rem;
    transform: translate(-50%, calc(min(46vmin, 290px) + 0.5cm - 1rem + 10px));
  }

  .cine.is-brand .cine__brand {
    transform: translate(-50%, calc(min(46vmin, 290px) + 0.5cm - 1rem));
  }

  .cine__wordmark {
    font-size: clamp(1.95rem, 10.5vw, 2.6rem);
    letter-spacing: 0.01em;
  }

  .cine__enter {
    bottom: max(4.5vh, 1.4rem);
    left: 50%;
    transform: translate3d(-50%, 14px, 0) scale(0.96);
  }
}

@media (min-width: 641px) {
  .cine__brand {
    transform: translate(-50%, calc(min(36vmin, 290px) - 3.5cm + 12px));
  }

  .cine.is-brand .cine__brand {
    transform: translate(-50%, calc(min(36vmin, 290px) - 3.5cm));
  }

  .cine__wordmark {
    font-size: clamp(2.45rem, 4.8vw, 3.4rem);
    letter-spacing: 0.02em;
  }

}

@media (prefers-reduced-motion: reduce) {
  .eye-container.is-breathing .eye__breathe,
  .eye-container.is-pupil-breathing .pupil-base,
  .eye-container.is-pupil-breathing .pupil-depth {
    animation: none !important;
  }
}