/* ==========================================================================
   Syntropise · The Cabinet · the homepage opening: THE EYE TEST
   An optician's room. A test chart on the wall, blurred; a brass phoropter in
   front. Turn the dial and a lens drops in: the chart snaps into focus as a
   different thinker's line. Everything here is et-.
   ========================================================================== */

/* ---------- the hero: copy on the left, the room on the right ---------- */
.hero.et-hero{justify-items:stretch;
  --sw:min(760px,calc((var(--vh,100svh) - var(--nav-h) - 34px) / 1.08));
  display:grid;grid-template-columns:minmax(290px,410px) minmax(0,var(--sw));grid-template-areas:"a s" "b s";
  grid-template-rows:auto auto;align-content:center;justify-content:center;align-items:center;
  column-gap:clamp(28px,4.4vw,80px);row-gap:0;min-height:var(--vh,100svh);
  padding:calc(var(--nav-h) + 10px) var(--gut) 26px;overflow-x:clip
}
.et-copy-a{grid-area:a;align-self:end}
.et-copy-b{grid-area:b;align-self:start}
.et-h1{margin-bottom:24px}
.et-copy-b .lede{max-width:24em}
.et-scene{grid-area:s;width:100%}

/* ---------- the room ---------- */
.et-scene{--cw:50%;position:relative;container-type:inline-size;isolation:isolate;-webkit-tap-highlight-color:transparent}
.et-glow{position:absolute;z-index:0;left:50%;top:0;width:82%;aspect-ratio:1;transform:translate(-50%,-14%);pointer-events:none;
  background:radial-gradient(circle,#f58c8a 1.2px,transparent 1.55px) 0 0/7px 7px;
  -webkit-mask:radial-gradient(closest-side,#000 0,rgba(0,0,0,.55) 42%,rgba(0,0,0,.18) 70%,transparent 100%);mask:radial-gradient(closest-side,#000 0,rgba(0,0,0,.55) 42%,rgba(0,0,0,.18) 70%,transparent 100%);
  opacity:.22;transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.et-scene.et-lit .et-glow{opacity:.62;transform:translate(-50%,-14%) scale(1.08)}

/* the lightbox on the wall */
.et-chart{position:relative;z-index:1;width:var(--cw);margin:0 auto}
.et-lightbox{position:relative;aspect-ratio:.78;border:3px solid var(--ink);border-radius:14px;background:#fbf8f1;isolation:isolate}
.et-lightbox::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:14px;background:var(--grain-c),var(--coral-2);transform:translate(8px,7px)}
.et-lightbox::after{content:"";position:absolute;inset:3.2%;border:1.5px solid rgba(20,19,17,.55);border-radius:6px;pointer-events:none}
.et-screw{position:absolute;width:3.4%;aspect-ratio:1;border-radius:50%;background:#f5f2ec;box-shadow:inset 0 0 0 1.5px var(--ink)}
.et-screw::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:1.5px;margin-top:-.75px;background:var(--ink);transform:rotate(35deg)}
.et-screw:nth-of-type(1){left:1.1%;top:1%}.et-screw:nth-of-type(2){right:1.1%;top:1%}.et-screw:nth-of-type(3){left:1.1%;bottom:1%}.et-screw:nth-of-type(4){right:1.1%;bottom:1%}
.et-screw:nth-of-type(2)::after{transform:rotate(-20deg)}.et-screw:nth-of-type(3)::after{transform:rotate(80deg)}

/* the printed card in the lightbox */
.et-sheet{position:absolute;inset:6.5% 7.5% 6%;overflow:hidden;container-type:inline-size;border-radius:3px;
  background:radial-gradient(120% 80% at 50% 30%,#fffefa 0,#fbf7ef 60%,#f3ede1 100%)}
.et-scene.et-lit .et-sheet{background:radial-gradient(120% 80% at 50% 30%,#fffffd 0,#fdfaf3 60%,#f6f0e5 100%)}
/* the lightbox is off until the first lens is in; then it flickers on */
html.js .et-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 35%,rgba(120,104,86,.1),rgba(80,66,52,.24));mix-blend-mode:multiply;transition:opacity .5s}
html.js .et-scene.et-lit .et-sheet::after{opacity:0}
.et-flicker .et-sheet::after{animation:et-flick .62s steps(1,end)}
@keyframes et-flick{0%{opacity:0}12%{opacity:1}22%{opacity:0}30%{opacity:.8}46%{opacity:0}58%{opacity:.5}66%{opacity:0}100%{opacity:0}}
.et-flicker .et-glow{animation:et-gflick .62s steps(1,end)}
@keyframes et-gflick{0%{opacity:.62}12%{opacity:.3}22%{opacity:.62}30%{opacity:.36}46%{opacity:.62}58%{opacity:.44}66%{opacity:.62}}
.et-type{--bl:0px;--gh:0px;position:absolute;inset:5% 0 13%;display:flex;flex-direction:column;justify-content:space-around;align-items:stretch;
  font-family:'Young Serif',var(--serif);color:var(--ink);transform-origin:50% 45%;
  text-shadow:0 0 0 rgba(20,19,17,0),.42cqw .34cqw 0 rgba(245,140,138,.85)}
.et-row{position:relative;margin:0;text-align:center;font-size:calc(var(--s,6) * 1cqw);line-height:1;letter-spacing:.12em;white-space:nowrap}
.et-w{display:inline-block;padding-left:.12em}
.et-va{position:absolute;right:1.2cqw;top:50%;transform:translateY(-50%);font:500 2.1cqw/1 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--ink-3);text-shadow:none}
.et-who{font-family:var(--sans);font-weight:650;letter-spacing:.36em}
.et-who .et-w{padding-left:.36em}
.et-src{font-family:var(--sans);font-weight:520;letter-spacing:.24em;color:var(--ink-2)}
.et-src .et-w{padding-left:.24em}
.et-rule-row{font-size:1cqw;line-height:0}
.et-rule{display:block;width:64%;height:2.5px;margin:0 auto;background:var(--coral-2);box-shadow:.3cqw .25cqw 0 rgba(20,19,17,.85)}
.et-foot{position:absolute;left:0;right:0;bottom:3.4%;margin:0;text-align:center;font:600 1.9cqw/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3)}

/* the key word gets a coral marker once it's in focus */
.et-hl{color:inherit;background-color:transparent;background-image:linear-gradient(transparent 52%,rgba(245,140,138,.62) 52%,rgba(245,140,138,.62) 94%,transparent 94%);background-repeat:no-repeat;background-size:100% 100%;padding:0 .04em}
html.js .et-hl{background-size:0% 100%;transition:background-size .75s cubic-bezier(.65,0,.35,1)}
html.js .et-chart.is-sharp .et-hl{background-size:100% 100%;transition-delay:.38s}

/* out of focus: blurred, doubled (the ink drifts off its coral, like a misprint) */
html.js .et-chart:not(.is-sharp) .et-type{filter:blur(var(--bl,6px));transform:scale(1.025);
  text-shadow:var(--gh,8px) 0 0 rgba(20,19,17,.42),calc(var(--gh,8px) * -.7) calc(var(--gh,8px) * .4) 0 rgba(245,140,138,.7)}

/* the glare as the lens seats */
.et-flare{position:absolute;inset:-20% -60%;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 41%,rgba(255,254,250,.9) 47%,rgba(249,183,178,.55) 51%,transparent 58%);transform:translateX(-60%)}
.et-flash .et-flare{animation:et-flare 1s var(--ease) .16s both}
@keyframes et-flare{0%{opacity:0;transform:translateX(-60%)}25%{opacity:1}100%{opacity:0;transform:translateX(55%)}}

/* ---------- the phoropter ---------- */
.et-phw{position:relative;z-index:2;margin-top:.6%}
.et-ph{width:100%;height:auto;overflow:visible}
.et-cp{fill:url(#gc);fill:var(--coral-2)}
.et-ph .et-cp{fill:url(#gc)}
.et-o{stroke:#141311}
.et-o:not([fill]){fill:none}
.et-k{stroke:#141311;stroke-linecap:round;fill:none}
.et-win{fill:#fdfaf4;stroke:#141311;stroke-width:1.6}
.et-eng{font:700 12px var(--display);text-anchor:middle;fill:#141311;opacity:.45}
.et-face{font:650 11px var(--sans);text-anchor:middle;fill:#4f4b44;letter-spacing:.2em}
.et-face-s{font-size:7.5px;letter-spacing:.3em;fill:#857f75}
.et-pl-no{font:620 8.6px var(--sans);letter-spacing:.3em;text-anchor:middle;fill:#4f4b44}
.et-pl-nm{font:700 15px var(--display);letter-spacing:.12em;text-anchor:middle;fill:#141311}
.et-dn{font:700 18px var(--display);text-anchor:middle;dominant-baseline:central;fill:#141311}

/* everything that turns with the dial */
.et-ring-r{transform:rotate(var(--rot))}
.et-ring-l{transform:rotate(calc(var(--rot) * -1))}
.et-bat-r{transform:rotate(calc(var(--rot) * -1))}
.et-bat-l{transform:rotate(var(--rot))}
.et-dface{transform:rotate(var(--rot))}
.et-scene:not(.et-free) :is(.et-dface,.et-ring,.et-bat){transition:transform .56s cubic-bezier(.3,1.42,.52,1)}

.et-bubble{transform-box:fill-box;transform-origin:center}
.et-jig .et-bubble{animation:et-bub 1s var(--ease)}
@keyframes et-bub{0%{transform:none}18%{transform:translateX(7px) scaleX(.82)}40%{transform:translateX(-5px)}62%{transform:translateX(2.5px)}82%{transform:translateX(-1px)}100%{transform:none}}
.et-index{transform-box:fill-box;transform-origin:50% 100%}
.et-tick .et-index{animation:et-idx .16s ease-out}
@keyframes et-idx{40%{transform:translateY(3px) scaleY(.8)}}
.et-glint{opacity:0}
.et-flash .et-glint{animation:et-glint .8s var(--ease) .05s}
@keyframes et-glint{0%{opacity:0}20%{opacity:.95}100%{opacity:0}}

/* a thinker's face, faintly, in the glass */
.et-refl{opacity:0;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;transition:opacity .7s var(--ease);pointer-events:none}
.et-scene.has-refl .et-refl{opacity:.26}
.et-scene.has-refl .et-eye:hover .et-refl{opacity:.78}

/* the dial: a big knurled wheel you can click, drag, scroll or key */
.et-dial{position:absolute;left:78.95%;top:40.6%;width:21.05%;aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none;z-index:3;-webkit-user-select:none;user-select:none}
.et-dial svg{width:100%;height:100%;overflow:visible}
.et-dial:active{cursor:grabbing}
.et-dial:focus{outline:none}
.et-kb .et-dial:focus-visible,html:not(.js) .et-dial:focus-visible{outline:2.5px solid var(--ink);outline-offset:5px}
.et-dial:hover .et-dface path:first-child{fill:#fffdf8}

/* "Turn the dial" */
.et-hint{position:absolute;right:3%;top:9%;z-index:3;display:flex;align-items:flex-end;gap:2px;margin:0;pointer-events:none;
  font:italic 400 clamp(15px,2.9cqw,22px)/1 var(--serif);color:var(--coral-ink);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.et-hint svg{width:clamp(34px,6.4cqw,54px);height:auto;margin-bottom:-.9em}
.et-ask .et-hint{opacity:1;transform:none}
.et-ask .et-hint svg{animation:et-bob 1.6s ease-in-out infinite}
@keyframes et-bob{50%{transform:translate(3px,4px)}}
.et-nudge .et-dface{animation:et-wob 1.5s var(--ease)}
@keyframes et-wob{0%,100%{transform:rotate(var(--rot))}14%{transform:rotate(calc(var(--rot) + 13deg))}34%{transform:rotate(calc(var(--rot) - 7deg))}54%{transform:rotate(calc(var(--rot) + 4deg))}74%{transform:rotate(calc(var(--rot) - 1.5deg))}}
.et-off *{animation-play-state:paused!important}

/* ---------- the prescription ---------- */
.et-rx{position:absolute;z-index:4;left:-3%;top:39%;width:min(304px,44%);padding:22px 20px 16px;background:#fffdf8;background-image:var(--grain);
  border:2px solid var(--ink);border-radius:3px;box-shadow:6px 6px 0 var(--coral-2);
  opacity:0;transform:translate(14%,46%) rotate(9deg) scale(.86);transform-origin:70% 100%;
  transition:opacity .45s var(--ease),transform .9s var(--spring)}
.et-rx[hidden]{display:none}
.et-rx.is-in{opacity:1;transform:rotate(-3.2deg)}
.et-rx::before{content:"";position:absolute;left:10px;right:10px;top:7px;height:3px;background:radial-gradient(circle,var(--ink) 1.1px,transparent 1.5px) 0 0/8px 3px;opacity:.5}
.et-rx-top{display:flex;align-items:flex-start;gap:12px;padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.et-rx-rx{font:400 2.5rem/.8 var(--serif);color:var(--coral-ink);letter-spacing:-.06em}
.et-rx-rx i{font-size:.6em;margin-left:-.06em}
.et-rx-co{flex:1;padding-top:2px;font-size:.7rem;font-weight:620;letter-spacing:.24em;text-transform:uppercase;line-height:1.35}
.et-rx-co small{font-size:.86em;font-weight:500;letter-spacing:.14em;color:var(--ink-3)}
.et-rx-x{display:grid;place-items:center;width:30px;height:30px;margin:-6px -6px 0 0;border-radius:50%;font-size:1.3rem;line-height:1;color:var(--ink-2)}
.et-rx-x:hover{background:var(--paper-2);color:var(--ink)}
.et-rx-f{margin:10px 0 14px;padding-bottom:8px;border-bottom:1px dashed rgba(20,19,17,.4);font-size:.8rem;line-height:1.35}
.et-rx-f b{display:block;font-size:.66rem;font-weight:620;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.et-rx-f span{font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--coral-ink)}
.et-rx-h{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.3vw,1.85rem);line-height:1;letter-spacing:-.015em;margin:0 0 10px}
.et-rx-p{font-size:.95rem;line-height:1.4;margin:0 0 16px}
.et-rx-end{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.et-rx-sig{font:italic 400 1.25rem/1 var(--serif);color:var(--ink-2);transform:rotate(-4deg)}

/* ---------- the thinker's card, clipped to the chart's corner; changes with each lens ---------- */
.et-card{position:absolute;z-index:3;right:-27%;top:9%;width:38%;display:grid;gap:3px;padding:7% 7% 8%;background:#fbf9f4;border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--coral-2);transform:translateX(18%) rotate(9deg);opacity:0;transform-origin:20% 0;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .35s;pointer-events:none}
.et-card.is-in{opacity:1;transform:rotate(4deg)}
.et-card.is-swap{opacity:0;transform:translateX(10%) rotate(12deg);transition:transform .26s ease-in,opacity .22s}
.et-cclip{position:absolute;left:50%;top:-11px;width:30%;height:16px;margin-left:-15%;border:2.5px solid var(--ink);border-radius:3px 3px 6px 6px;background:var(--grain-c),var(--coral-2)}
.et-cclip::after{content:"";position:absolute;left:22%;right:22%;top:-7px;height:7px;border:2.5px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0}
.et-cimg{position:relative;display:block;aspect-ratio:4/5;margin-bottom:4px}
.et-cimg::before{content:"";position:absolute;inset:0;background:var(--grain-c),var(--coral-2);transform:translate(4px,3px)}
.et-cimg img{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;border:2px solid var(--ink);filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;background:#fbf9f4}
.et-cnm{font-family:var(--display);font-weight:700;font-size:clamp(.78rem,1.15cqi,1rem);line-height:1.05;letter-spacing:-.005em}
.et-clife{white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:clamp(.7rem,1cqi,.88rem);color:var(--coral-ink)}

/* ---------- smaller screens: the room under the headline ---------- */
@media (max-width:1180px){
  .hero.et-hero{grid-template-columns:minmax(260px,360px) minmax(0,var(--sw));column-gap:clamp(24px,3.4vw,48px)}
  .et-rx{left:-2%;width:min(290px,60%)}
}
@media (max-width:900px){
  .hero.et-hero{--sw:min(620px,100%);grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "s" "b";justify-items:center;row-gap:clamp(18px,4vw,30px);padding-top:calc(var(--nav-h) + 22px);min-height:0}
  .et-copy{width:100%;max-width:620px}
  .et-h1{margin-bottom:0}
  .et-scene{max-width:var(--sw)}
  .et-copy-b .lede{max-width:none}
}
@media (max-width:640px){
  .et-scene{--cw:60%}
  .et-card{right:-30%;width:40%;padding:6% 6% 7%}
  .et-cnm{font-size:.74rem}.et-clife{font-size:.64rem}
  .et-glow{width:104%}
  .et-rx{left:50%;top:4%;width:min(330px,94%);transform:translate(-50%,40%) rotate(8deg) scale(.86)}
  .et-rx.is-in{transform:translate(-50%,0) rotate(-2deg)}
  .et-phw{width:121%;margin-left:-21%;margin-top:1.5%}
  .et-scene{padding-bottom:30px}
  .et-hint{top:100%;right:1%;align-items:flex-start;margin-top:-4px}
  .et-hint svg{margin:-10px 0 0 2px;transform:scaleY(-1);width:36px}
  .et-ask .et-hint svg{animation:et-bob-up 1.6s ease-in-out infinite}
  @keyframes et-bob-up{0%,100%{transform:scaleY(-1)}50%{transform:scaleY(-1) translate(2px,4px)}}
}

/* ---------- reduced motion: no animation; lenses change instantly ---------- */
@media (prefers-reduced-motion:reduce){
  .et-scene :is(.et-dface,.et-ring,.et-bat,.et-type,.et-hl,.et-rx,.et-glow,.et-hint,.et-refl,.et-card){transition:none!important;animation:none!important}
  .et-scene *{animation:none!important}
  html.js .et-chart:not(.is-sharp) .et-type{transform:none}
}