/* K&N / THE ART OF CONNECTION
   The controller supplies a normalized --opening-progress. No timed intro loop. */
.opening-stage {
  --op: clamp(0, var(--opening-progress, 0), 1);
  --opening-exit: clamp(0, calc((var(--op) - .82) * 5.5556), 1);
  position:fixed;
  inset:0;
  z-index:1000;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  display:block;
  background:#161422;
  color:#fff4df;
  clip-path:inset(calc(var(--opening-exit) * 100%) 0 0 0);
  contain:layout paint;
}
.opening-stage[hidden] { display:none!important; }
html.opening-pending .opening-stage[hidden] { display:block!important; }
html.opening-pending, html.opening-active { overflow:hidden; }
.opening-stage:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 60% 45%,#9872b12b,transparent 53%),radial-gradient(ellipse at 30% 80%,#5e5f9b1d,transparent 51%),linear-gradient(150deg,#1d1728,#131521 71%);
}
.opening-stage:after {
  content:"";
  position:absolute;
  inset:clamp(17px,2.3vw,36px);
  z-index:1;
  pointer-events:none;
  border:1px solid #d7c2e01c;
  clip-path:polygon(0 0,24% 0,24% 1px,1px 1px,1px 18%,0 18%,0 0,100% 0,100% 100%,77% 100%,77% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 80%,100% 80%,100% 0);
}
.opening-stage>canvas[data-opening-field] {
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.opening-brand {
  position:absolute;
  top:clamp(30px,4.2vw,65px);
  left:clamp(28px,5.4vw,84px);
  z-index:5;
  display:flex;
  align-items:center;
  gap:17px;
  color:#f1e5ef;
  opacity:calc(1 - var(--opening-exit));
}
.opening-brand>img { display:block; width:44px; height:44px; object-fit:contain; filter:invert(1); mix-blend-mode:screen; }
.opening-brand>span { font-family:var(--sans,sans-serif); font-size:12px; line-height:1.6; font-weight:500; letter-spacing:.18em; }
.opening-words { position:absolute; inset:0; z-index:3; pointer-events:none; }
.opening-word {
  position:absolute;
  margin:0;
  font-family:var(--serif,"Yu Mincho",serif);
  font-size:clamp(56px,9.9vw,168px);
  line-height:1.13;
  font-weight:400;
  letter-spacing:-.055em;
  white-space:nowrap;
  text-shadow:0 2px 22px #100d184d;
  transform-origin:50% 80%;
}
.opening-word.word-a {
  --word-in:clamp(0, calc((var(--op) - .07) * 6.25), 1);
  --word-out:clamp(0, calc((var(--op) - .59) * 6.25), 1);
  top:24%;
  left:9%;
  color:#fff1db;
  opacity:clamp(0, calc(var(--word-in) - var(--word-out)), 1);
  transform:translate3d(calc((1 - var(--word-in)) * -9vw + var(--word-out) * 2.5vw),calc((1 - var(--word-in)) * .65em - var(--word-out) * .2em),0) rotate(calc((1 - var(--word-in)) * -4deg));
}
.opening-word.word-b {
  --word-in:clamp(0, calc((var(--op) - .22) * 6.25), 1);
  --word-out:clamp(0, calc((var(--op) - .68) * 7.1429), 1);
  top:41%;
  right:8%;
  color:#d6b9e9;
  opacity:clamp(0, calc(var(--word-in) - var(--word-out)), 1);
  transform:translate3d(calc((1 - var(--word-in)) * 10vw - var(--word-out) * 3vw),calc((1 - var(--word-in)) * .8em - var(--word-out) * .22em),0) rotate(calc((1 - var(--word-in)) * 3deg));
}
.opening-word.word-c {
  --word-in:clamp(0, calc((var(--op) - .39) * 5.8824), 1);
  --word-out:clamp(0, calc((var(--op) - .79) * 5.8824), 1);
  left:19%;
  bottom:17%;
  color:#ecd0a0;
  opacity:clamp(0, calc(var(--word-in) - var(--word-out)), 1);
  transform:translate3d(calc((1 - var(--word-in)) * -4vw + var(--word-out) * 1.4vw),calc((1 - var(--word-in)) * .9em - var(--word-out) * .2em),0) rotate(calc((1 - var(--word-in)) * -2deg));
}
.opening-footer {
  position:absolute;
  left:clamp(28px,5.4vw,84px);
  right:clamp(28px,5.4vw,84px);
  bottom:max(24px,env(safe-area-inset-bottom));
  z-index:7;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:20px;
  border-top:1px solid #dac3e02d;
}
.opening-footer>span { color:#bcaacb; font-family:var(--sans,sans-serif); font-size:9px; line-height:1.8; letter-spacing:.19em; }
.opening-footer>[data-opening-skip] {
  flex:0 0 auto;
  min-height:46px;
  min-width:100px;
  padding:10px 0 10px 16px;
  color:#fff0dc;
  border:0;
  border-bottom:1px solid #d6bd986e;
  background:transparent;
  font-family:var(--sans,sans-serif);
  font-size:12px;
  line-height:1.8;
  letter-spacing:.04em;
  cursor:pointer;
}
.opening-footer>[data-opening-skip]:hover { color:#ddc3ee; border-bottom-color:#ddc3ee; }
.opening-footer>[data-opening-skip]:focus-visible { outline:3px solid #e3bf88; outline-offset:6px; }

/* Replay is a secondary invitation, beside the existing business destination. */
.opening-replay {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:44px;
  max-width:100%;
  padding:9px 0;
  border:0;
  border-bottom:1px solid #bda4c26b;
  background:transparent;
  color:#d9c4e2;
  font-family:var(--sans,sans-serif);
  font-size:11px;
  line-height:1.8;
  letter-spacing:.035em;
  cursor:pointer;
}
.opening-replay:hover { color:#f2d5aa; border-bottom-color:#f2d5aa; }
.opening-replay:focus-visible { outline:3px solid #e3bf88; outline-offset:5px; }
.opening-replay>span { font-size:17px; line-height:1; }

/* The landing is finite: all content starts readable without the controller. */
html.opening-complete .gallery-copy h1>span,
html.opening-complete .gallery-copy h1>em {
  animation:opening-title-arrive 350ms cubic-bezier(.16,.8,.24,1) both;
}
html.opening-complete .gallery-copy h1>span:nth-child(2) { animation-delay:75ms; }
html.opening-complete .gallery-copy h1>em { animation-delay:150ms; }
html.opening-complete .gallery-art>.sculpture-canvas {
  transform-origin:52% 48%;
  animation:opening-object-arrive 500ms cubic-bezier(.15,.68,.2,1) both;
}
.arrival-halo { position:absolute; inset:9% 4% 10%; z-index:0; pointer-events:none; border:1px solid #e3bfdc32; border-radius:50%; opacity:.38; }
.arrival-halo:before, .arrival-halo:after { content:""; position:absolute; inset:7%; border:1px solid #d9bfd02d; border-radius:50%; }
.arrival-halo:after { inset:16%; border-color:#d6c6ed21; }
html.opening-complete .arrival-halo { animation:opening-halo-arrive 500ms cubic-bezier(.17,.7,.24,1) both; }
@keyframes opening-title-arrive {
  from { opacity:.2; transform:translate3d(0,.26em,0) rotate(-1.1deg); }
  to { opacity:1; transform:none; }
}
@keyframes opening-object-arrive {
  from { opacity:.65; transform:scale(1.12) rotate(-2.2deg); }
  to { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes opening-halo-arrive {
  0% { opacity:0; transform:scale(.83) rotate(-8deg); }
  45% { opacity:.7; }
  100% { opacity:.38; transform:scale(1) rotate(0); }
}

/* Internal pages: a brief camera arrival, never an information gate. */
.cinema-arrival .page-hero h1 { animation:passage-heading-arrive 450ms cubic-bezier(.17,.75,.25,1) both; }
.cinema-arrival .page-hero-art .sculpture-canvas { transform-origin:52% 48%; animation:passage-object-arrive 740ms cubic-bezier(.15,.68,.2,1) both; }
body[data-page="water"].cinema-arrival .page-hero-art .sculpture-canvas { animation-name:passage-water-arrive; animation-duration:800ms; }
body[data-page="creed"].cinema-arrival .page-hero-art .sculpture-canvas { animation-name:passage-creed-arrive; animation-duration:850ms; }
body[data-page="careers"].cinema-arrival .page-hero-art .sculpture-canvas { animation-name:passage-careers-arrive; animation-duration:820ms; }
@keyframes passage-heading-arrive {
  from { transform:translate3d(0,.13em,0); }
  to { transform:none; }
}
@keyframes passage-object-arrive {
  from { opacity:.7; transform:translate3d(1.5%,2%,0) scale(1.1) rotate(-2deg); }
  to { opacity:1; transform:none; }
}
@keyframes passage-water-arrive {
  from { opacity:.7; transform:translate3d(4%,7%,0) scale(1.12) rotate(-4deg); }
  to { opacity:1; transform:none; }
}
@keyframes passage-creed-arrive {
  from { opacity:.72; transform:translate3d(0,-2%,0) scale(1.08) rotate(-7deg); }
  to { opacity:1; transform:none; }
}
@keyframes passage-careers-arrive {
  from { opacity:.75; transform:perspective(1000px) rotateY(-12deg) rotateZ(5deg) scale(.94); }
  to { opacity:1; transform:perspective(1000px) rotateY(0) rotateZ(0) scale(1); }
}
@media(min-width:1450px) {
  .opening-word.word-a { left:10%; }
  .opening-word.word-b { right:10%; }
  .opening-word.word-c { left:22%; }
  .opening-footer { bottom:max(34px,env(safe-area-inset-bottom)); }
}
@media(max-width:900px) {
  .opening-word { font-size:clamp(60px,10.6vw,100px); }
  .opening-word.word-a { left:7%; top:26%; }
  .opening-word.word-b { right:6%; top:44%; }
  .opening-word.word-c { left:14%; bottom:19%; }
  .opening-brand { top:34px; left:34px; }
  .opening-footer { left:34px; right:34px; }
}
@media(max-width:600px) {
  .opening-stage:after { inset:15px; }
  .opening-brand { top:max(27px,env(safe-area-inset-top)); left:26px; gap:13px; }
  .opening-brand>img { width:37px; height:37px; }
  .opening-brand>span { font-size:11px; }
  .opening-word { font-size:clamp(56px,12.1vw,74px); line-height:1.18; letter-spacing:-.06em; }
  .opening-word.word-a { left:8%; top:26%; }
  .opening-word.word-b { right:7%; top:44%; }
  .opening-word.word-c { left:13%; bottom:21%; }
  .opening-footer { left:26px; right:26px; bottom:max(23px,env(safe-area-inset-bottom)); padding-top:14px; gap:15px; }
  .opening-footer>span { font-size:8px; letter-spacing:.12em; max-width:145px; }
  .opening-footer>[data-opening-skip] { min-width:86px; min-height:46px; font-size:11px; padding-left:10px; }
  .opening-replay { min-height:44px; font-size:11px; }
  .arrival-halo { inset:13% 6% 13%; }
}
@media(max-width:360px) {
  .opening-word { font-size:54px; }
  .opening-brand { left:24px; }
  .opening-footer { left:24px; right:24px; }
  .opening-footer>span { font-size:7px; letter-spacing:.1em; }
  .opening-footer>[data-opening-skip] { font-size:11px; min-width:83px; }
  .opening-replay { font-size:10px; gap:12px; }
}
@media(max-height:500px) and (min-width:500px) {
  .opening-brand { top:20px; left:30px; gap:12px; }
  .opening-brand>img { width:30px; height:30px; }
  .opening-brand>span { font-size:10px; }
  .opening-word { font-size:clamp(36px,10.5vh,60px); }
  .opening-word.word-a { top:26%; left:13%; }
  .opening-word.word-b { top:41%; right:14%; }
  .opening-word.word-c { bottom:23%; left:27%; }
  .opening-footer { left:30px; right:30px; bottom:15px; padding-top:7px; }
  .opening-footer>[data-opening-skip] { min-height:44px; font-size:10px; }
  .opening-footer>span { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .opening-stage { clip-path:none; }
  .opening-word { opacity:0!important; transform:none!important; }
  .opening-word.word-c { opacity:1!important; }
  html.opening-complete .gallery-copy h1>span,
  html.opening-complete .gallery-copy h1>em,
  html.opening-complete .gallery-art>.sculpture-canvas,
  html.opening-complete .arrival-halo,
  .cinema-arrival .page-hero h1,
  .cinema-arrival .page-hero-art .sculpture-canvas { animation:none!important; opacity:1; transform:none; }
  .arrival-halo { opacity:.28; }
}
html.motion-off .opening-stage { clip-path:none; }
html.motion-off .opening-word { transform:none!important; }
html.motion-off.opening-complete .gallery-copy h1>span,
html.motion-off.opening-complete .gallery-copy h1>em,
html.motion-off.opening-complete .gallery-art>.sculpture-canvas,
html.motion-off.opening-complete .arrival-halo,
html.motion-off .cinema-arrival .page-hero h1,
html.motion-off .cinema-arrival .page-hero-art .sculpture-canvas { animation:none!important; opacity:1; transform:none; }
@media print {
  .opening-stage, html.opening-pending .opening-stage[hidden], .opening-replay, .arrival-halo { display:none!important; }
  html.opening-pending, html.opening-active { overflow:visible; }
  html.opening-complete .gallery-copy h1>span,
  html.opening-complete .gallery-copy h1>em,
  html.opening-complete .gallery-art>.sculpture-canvas,
  .cinema-arrival .page-hero h1,
  .cinema-arrival .page-hero-art .sculpture-canvas { animation:none!important; opacity:1; transform:none; }
}
.opening-brand>span>small{display:block;font-size:7px;line-height:1.8;letter-spacing:.14em;margin-top:5px;color:#bdaecb;font-weight:400}
@media(max-width:600px){.opening-brand>span>small{font-size:6px;max-width:220px;letter-spacing:.09em}}
[data-opening-replay]:disabled{opacity:.48;cursor:default}