@font-face{font-family:"Top cormorant";src:url("assets/fonts/top-cormorant-r.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Top cormorant";src:url("assets/fonts/top-cormorant-i.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
/* EMQORE — obsidian glass in a matte black room. */
@font-face{font-family:"Inter Tight";src:url("assets/fonts/intertight.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--ease:cubic-bezier(.16,1,.3,1);--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;--bar:clamp(70px,11vh,110px);--edge:2.2vw;--top:clamp(56px,8.5vh,84px)}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;overflow:hidden}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:#ddd;color:#000}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* matte + jet room */
.void{position:fixed;inset:0;z-index:0;background:
  radial-gradient(55vmax 38vmax at 50% 40%,rgba(52,52,56,.32),transparent 66%),
  radial-gradient(120vmax 90vmax at 50% 50%,#070708 0%,#030303 55%,#000 100%)}
.matte{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");background-size:600px 600px}
.smoke{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.smoke--back{z-index:1}
.smoke--front{z-index:3}
.grain{position:fixed;inset:-50%;z-index:4;pointer-events:none;opacity:.085;mix-blend-mode:overlay;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,2%)}}
body::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(0,0,0,.72) 100%)}

.stage{position:relative;z-index:2;height:100vh;height:100svh}
.word{position:absolute;left:var(--edge);top:calc(var(--top) + var(--gapT,0px));width:calc(100vw - 2 * var(--edge));height:calc(100% - var(--top) - var(--gapT,0px) - var(--bar) - var(--gapB,0px));overflow:visible;
  opacity:0;transition:opacity 6s ease .3s}
.is-ready .word{opacity:1}
.l-body{opacity:.9}
.l-inner{opacity:.9}
.l-rimbase{opacity:.16}
.l-lit{opacity:.95}
.l-sweep{mix-blend-mode:screen}

/* top line: white display serif, true italics on the verbs; spans the wordmark's outer edges */
.creed{position:fixed;z-index:7;left:var(--edge);right:var(--edge);top:0;height:var(--top);margin:0;display:flex;align-items:center;justify-content:space-between;
  font-family:"Top cormorant","Cormorant Garamond",Garamond,serif;font-weight:600;font-size:clamp(.7rem,.98vw,.98rem);letter-spacing:.16em;text-transform:uppercase;line-height:1;color:#fff;white-space:nowrap;
  text-shadow:0 0 10px rgba(255,255,255,.22);-webkit-font-smoothing:antialiased;opacity:0;transition:opacity 4s ease 1.2s}
.is-ready .creed{opacity:1}
.creed span{display:block}
.creed em{font-style:italic;letter-spacing:.1em;margin-right:.12em}
.creed i{display:block;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.8;flex:none}

/* small type: faint until the eye settles */
.bar{position:absolute;left:var(--edge);right:var(--edge);bottom:0;z-index:6;height:var(--bar);display:grid;grid-template-columns:repeat(6,var(--cell,1fr));column-gap:var(--gx,2vw);align-items:center;opacity:0;transition:opacity 9s ease 3.5s}
.is-ready .bar{opacity:1}
/* desktop: one item per letter column (E M Q), CONTACT closes on the last E's right edge */
.lines{display:contents;list-style:none}
.lines li{font-size:clamp(.6rem,.8vw,.72rem);font-weight:400;letter-spacing:.44em;text-transform:uppercase;color:#a3a3a3;line-height:1;white-space:nowrap}
.lines li:nth-child(1){grid-column:1}.lines li:nth-child(2){grid-column:2}.lines li:nth-child(3){grid-column:3}
.contact{grid-column:6;justify-self:end}
.contact{position:relative;grid-column:6;justify-self:end;display:inline-block;padding:.6rem 0;color:#d2d2d2;text-decoration:none;line-height:1}
.contact__t{display:inline-block;font-size:clamp(.64rem,.85vw,.76rem);font-weight:500;letter-spacing:.56em;margin-right:-.56em;text-transform:uppercase;transition:letter-spacing 1.6s var(--ease),margin 1.6s var(--ease),color 1.2s,text-shadow 1.4s}
.contact__l{position:absolute;right:0;bottom:0;height:1px;width:22px;background:linear-gradient(90deg,transparent,#c8c8cc);opacity:.6;transition:width 1.6s var(--ease),opacity 1s}
.contact:hover .contact__t,.contact:focus-visible .contact__t{letter-spacing:.8em;margin-right:-.8em;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.4)}
.contact:hover .contact__l,.contact:focus-visible .contact__l{width:100%;opacity:1}
.contact:focus-visible{outline:1px solid rgba(255,255,255,.3);outline-offset:8px}

@media (max-aspect-ratio:3/4){
  :root{--edge:9vw;--top:clamp(196px,25vh,226px);--bar:clamp(150px,20vh,180px);--gapT:5vh;--gapB:4vh}
  .creed{flex-direction:column;justify-content:flex-end;align-items:center;gap:1.05rem;white-space:normal;text-align:center;font-size:.74rem;letter-spacing:.14em;line-height:1.25;padding-top:max(5vh,calc(env(safe-area-inset-top) + 3vh))}
      .creed em{letter-spacing:.09em}
  .creed i{display:none}
  .bar{grid-template-columns:repeat(3,var(--cell,1fr));align-items:end;align-content:end;padding-bottom:max(5.5vh,calc(env(safe-area-inset-bottom) + 3vh))}
  .lines{display:flex;flex-direction:column;align-items:flex-start;gap:1.05rem;grid-column:1 / 3;grid-row:1;margin:0;padding:0}
  .lines li{font-size:.6rem;letter-spacing:.4em}
  .contact{grid-column:3;grid-row:1;padding:0;align-self:end}
  .contact__t{font-size:.62rem;letter-spacing:.5em;margin-right:-.5em}
  .contact__l{bottom:-.9rem}
  .contact:hover .contact__t{letter-spacing:.62em;margin-right:-.62em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .word,.bar{opacity:1}
}