:root {
  color-scheme: dark;
  --coal: #090707;
  --ember: #ef7e48;
  --fire: #ffb46c;
  --paper: #fff2e7;
  --ghost: rgba(255, 235, 219, .64);
  --faint: rgba(255, 230, 209, .38);
  --ease: cubic-bezier(.19, 1, .22, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
*,*::before,*::after { box-sizing: border-box; }
html { background: var(--coal); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100svh; margin: 0; background: var(--coal); color: var(--paper); }
button,input,textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fire); outline-offset: 4px; }
::selection { background: var(--ember); color: #190902; }
.screen-reader-text { position: absolute!important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; padding: 0; border: 0; }
.skip-link { position: fixed; z-index: 99; top: 12px; left: 12px; padding: 13px 16px; background: #140c09; text-decoration: none; transform: translateY(-170%); }
.skip-link:focus { transform: translateY(0); }

/* The film remains fixed while a short, unobtrusive scroll opens the contact experience. */
.scene { position: relative; min-height: 146svh; isolation: isolate; }
.scene__scroll-room { height: 146svh; pointer-events: none; }
.scene__stage { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: var(--coal); }
.scene__poster,.scene__video,.scene__vignette,.scene__cursor-glow,.scene__cursor-ember,.scene__grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene__poster { z-index: 0; display: block; }
.scene__poster-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; }
.scene__video { z-index: 1; object-fit: cover; object-position: center; opacity: 0; background: transparent; transition: opacity 800ms ease; }
.scene.is-playing .scene__video { opacity: 1; }
.scene__vignette { z-index: 2; background:
  linear-gradient(180deg, rgba(0,0,0,.08), transparent 31%, transparent 67%, rgba(0,0,0,.44) 100%),
  linear-gradient(90deg, rgba(0,0,0,.08), transparent 18%, transparent 81%, rgba(0,0,0,.14)); }
.scene__cursor-glow { z-index: 3; opacity: 0; background: radial-gradient(430px circle at var(--pointer-x,50%) var(--pointer-y,50%), rgba(250,99,30,.15), rgba(255,118,42,.04) 45%, transparent 73%); transition: opacity 360ms ease; }
.scene__cursor-ember { z-index: 4; opacity: 0; width: 7px; height: 7px; top: var(--pointer-y,50%); left: var(--pointer-x,50%); right: auto; bottom: auto; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, #ffe1ad, #ff8d40 56%, transparent 72%); box-shadow: 0 0 14px 4px rgba(246,112,39,.4); transition: opacity 200ms ease; }
.scene.has-pointer .scene__cursor-glow,.scene.has-pointer .scene__cursor-ember { opacity: 1; }
.scene__grain { z-index: 5; opacity: .085; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }

/* Controls are deliberately small, low and away from the film's central artwork. */
.sound-switch { position: fixed; z-index: 35; left: clamp(19px,3.1vw,54px); bottom: calc(65px + env(safe-area-inset-bottom,0px)); display: grid; place-items: center; width: 39px; height: 39px; padding: 0; border: 1px solid rgba(255,219,194,.19); border-radius: 999px; color: #eed8c5; background: rgba(28,14,10,.52); box-shadow: 0 3px 30px rgba(0,0,0,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s var(--ease); }
.sound-switch:hover { transform: translateY(-2px); border-color: rgba(255,149,93,.6); color: white; background: rgba(59,27,14,.78); }
.sound-switch[aria-pressed="true"] { color: var(--fire); border-color: rgba(255,155,96,.55); box-shadow: 0 0 20px rgba(249,119,45,.13); }
.sound-switch__icon { width: 18px; height: 18px; }
.sound-switch__waves { display: none; }
.sound-switch__slash { display: block; }
.sound-switch[aria-pressed="true"] .sound-switch__waves { display: block; }
.sound-switch[aria-pressed="true"] .sound-switch__slash { display: none; }

.signal { position: fixed; z-index: 36; right: clamp(16px,3.2vw,55px); bottom: calc(62px + env(safe-area-inset-bottom,0px)); display: flex; flex-direction: column; align-items: flex-end; }
.signal__trigger { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 15px; min-height: 49px; padding: 8px 17px 8px 8px; border: 1px solid rgba(255,179,127,.48); border-radius: 999px; color: #fff0e5; background: linear-gradient(113deg, rgba(57,26,17,.85), rgba(13,10,9,.79)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 25px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,202,166,.11), 0 0 25px rgba(245,102,36,.08); transition: transform 500ms var(--ease), background 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.signal__trigger:hover { transform: translateY(-3px); border-color: rgba(255,191,136,.81); box-shadow: 0 10px 32px rgba(0,0,0,.46),0 0 26px rgba(245,101,34,.23); }
.signal__orb { position: relative; display: grid; place-items: center; flex: 0 0 33px; width: 33px; height: 33px; color: #ffba77; border-radius: 50%; background: radial-gradient(circle at 37% 33%, #88401d 0%, #4d2415 58%,#291610 90%); box-shadow: inset 0 0 0 1px rgba(255,181,105,.36), 0 0 18px rgba(248,105,28,.28); }
.signal__orb::before { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(255,135,67,.30); border-radius: 50%; animation: ember-pulse 3.8s ease-in-out infinite; }
.signal__orb svg { width: 17px; height: 17px; }
.signal__text { font-size: 10px; font-weight: 680; line-height: 1; letter-spacing: .175em; white-space: nowrap; }
.signal__sep { color: #e08451; margin: 0 2px; font-weight: 400; }
.signal__arrow { width: 17px; height: 17px; transition: transform .32s var(--ease); }
.signal__trigger:hover .signal__arrow { transform: translateX(3px); }
.signal.is-open .signal__trigger { border-color: rgba(255,197,144,.7); }
.signal.is-open .signal__arrow { transform: rotate(90deg); }
@keyframes ember-pulse { 0%,100% { transform: scale(.94); opacity: .48; } 50% { transform: scale(1.14); opacity: .9; } }

/* Right-edge, translucent dark-ember glass panel; no center-blocking overlay. */
.contact-panel { position: absolute; bottom: calc(100% + 15px); right: 0; width: min(390px,calc(100vw - 32px)); max-height: min(750px,calc(100dvh - 156px)); padding: 22px 23px 24px; overflow: hidden auto; overscroll-behavior: contain; border: 1px solid rgba(255,151,95,.39); border-radius: 19px; color: var(--paper); background:
  radial-gradient(ellipse at 100% 0%, rgba(134,44,15,.38),transparent 58%),
  linear-gradient(142deg,rgba(35,20,16,.90),rgba(12,10,10,.92) 72%);
  box-shadow: 0 32px 100px rgba(0,0,0,.57), inset 0 1px 0 rgba(255,224,194,.09), 0 0 40px rgba(222,72,17,.09);
  backdrop-filter: blur(26px) saturate(1.15); -webkit-backdrop-filter: blur(26px) saturate(1.15);
  opacity: 0; transform: translateY(17px) scale(.97); transform-origin: bottom right; pointer-events: none;
  transition: opacity .35s ease,transform .46s var(--ease), visibility .35s; visibility: hidden; scrollbar-width: thin; scrollbar-color: #8b4b30 transparent; }
.signal.is-open .contact-panel { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.contact-panel::before { content: ''; position: absolute; pointer-events: none; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,198,136,.65),transparent); }
.contact-panel__ambient { position: absolute; pointer-events: none; right: -46px; top: -65px; width: 215px; height: 215px; background: radial-gradient(circle,rgba(240,110,43,.15),transparent 68%); }
.contact-panel__header { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.contact-panel__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #f4bb98; font-size: 9px; letter-spacing: .19em; line-height: 1.5; font-weight: 700; }
.contact-panel__live { width: 5px; height: 5px; background: var(--ember); border-radius: 50%; box-shadow: 0 0 11px rgba(255,129,62,.84); }
.contact-panel__close { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255,228,199,.15); border-radius: 50%; color: #f4d8c0; background: rgba(255,255,255,.04); transition: background .2s ease,border-color .2s ease,transform .28s ease; }
.contact-panel__close:hover { transform: rotate(90deg); border-color: rgba(255,187,134,.64); background: rgba(255,134,65,.12); }
.contact-panel h2 { font-size: clamp(29px,3vw,37px); line-height: 1.13; letter-spacing: -.055em; font-weight: 520; margin: 5px 0 6px; }
.contact-panel h2 span { color: var(--ember); }
.contact-panel__intro { margin: 0 0 19px; font-size: 12px; line-height: 1.65; color: var(--ghost); }
.contact-panel form { display: grid; gap: 13px; }
.contact-panel__trap { position: absolute!important; width: 1px!important; height: 1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; opacity: 0!important; }
.contact-field { display: grid; gap: 6px; }
.contact-field > span { font-size: 9px; color: #ebc1a7; font-weight: 700; letter-spacing: .16em; }
.contact-field__optional { font-size: 8px; color: rgba(246,227,212,.4); font-weight: 500; letter-spacing: .075em; }
.contact-field__required { color: #ffa16b; }
.contact-field input,.contact-field textarea { display: block; min-width: 0; width: 100%; min-height: 41px; padding: 11px 13px; border: 1px solid rgba(255,225,201,.16); border-radius: 7px; background: rgba(15,11,11,.50); color: var(--paper); font-size: 12px; line-height: 1.42; outline: none; transition: border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.contact-field textarea { min-height: 65px; resize: vertical; max-height: 140px; }
.contact-field input::placeholder,.contact-field textarea::placeholder { color: rgba(245,219,199,.37); }
.contact-field input:focus,.contact-field textarea:focus { border-color: rgba(255,156,92,.8); background: rgba(39,22,17,.63); box-shadow: 0 0 0 3px rgba(235,109,56,.11); }
.contact-optin { display: grid; grid-template-columns: 17px 1fr; align-items: start; gap: 9px; position: relative; margin-top: 2px; color: #e7c8b2; font-size: 11px; line-height: 1.5; cursor: pointer; }
.contact-optin input { position: absolute; left: 0; top: 0; width: 17px; height: 17px; margin: 0; opacity: 0; }
.contact-optin__check { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(255,200,165,.49); border-radius: 4px; background: rgba(10,9,8,.4); transition: background .2s ease,border .2s ease; }
.contact-optin__check svg { width: 13px; height: 13px; opacity: 0; color: #1d0d06; }
.contact-optin input:checked + .contact-optin__check { background: #fca369; border-color: #fca369; }
.contact-optin input:checked + .contact-optin__check svg { opacity: 1; }
.contact-optin input:focus-visible + .contact-optin__check { outline: 2px solid var(--fire); outline-offset: 3px; }
.contact-panel__privacy { color: rgba(245,224,211,.40); font-size: 10px; line-height: 1.5; margin: -5px 0 0; }
.contact-panel__privacy a { color: #f8c4a0; text-underline-offset: 3px; }
.contact-panel__status { min-height: 0; font-size: 11px; color: #ffbb91; line-height: 1.4; }
.contact-panel__status:empty { display: none; }
.contact-panel__send { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 46px; width: 100%; padding: 0 17px; color: #220d07; border: 1px solid rgba(255,231,202,.25); border-radius: 7px; background: linear-gradient(100deg,#f09a5c,#ffbb7a 50%,#ee804d); background-size: 160% 100%; box-shadow: 0 5px 17px rgba(234,99,34,.15); font-size: 10px; letter-spacing: .16em; font-weight: 800; transition: background-position .4s ease,transform .25s ease,box-shadow .25s ease; }
.contact-panel__send:hover:not(:disabled) { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 7px 25px rgba(255,112,48,.24); }
.contact-panel__send:disabled { opacity: .65; cursor: wait; }
.contact-panel__send svg { transition: transform .25s ease; }
.contact-panel__send:hover svg { transform: translateX(3px); }
.contact-panel__success { padding: 50px 0 35px; text-align: center; }
.contact-panel__success[hidden] { display: none; }
.contact-panel__success > svg { color: #ffb77d; }
.contact-panel__success h2 { margin-top: 20px; }
.contact-panel__success p { margin: 9px 0 30px; color: var(--ghost); font-size: 13px; line-height: 1.6; }
.contact-panel__again { padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(255,179,124,.55); background: none; color: #ffc39d; letter-spacing: .14em; font-size: 10px; }

/* Copyright stands on its own: center, no rule, no panel, no secondary copy. */
.calcifer-copyright { position: fixed; z-index: 38; left: 0; right: 0; bottom: calc(15px + env(safe-area-inset-bottom,0px)); display: flex; justify-content: center; align-items: center; padding: 0 16px; color: rgba(251,235,223,.68); text-shadow: 0 2px 11px rgba(0,0,0,.75); font-size: 11px; letter-spacing: .01em; line-height: 1.45; text-align: center; pointer-events: none; }
.calcifer-copyright p { margin: 0; }

/* 404 is not the landing and does not introduce a header. */
.scene--not-found { min-height: 100svh; display: grid; place-items: center; }
.scene--not-found .scene__stage { background: radial-gradient(ellipse at 52% 50%,#552213,#090707 60%); }
.notfound-content { position: relative; z-index: 1; text-align: center; }
.notfound-content p { margin: 0; font-size: 10px; letter-spacing: .23em; color: #eaa173; }
.notfound-content h1 { margin: 10px 0 21px; font-size: clamp(100px,25vw,200px); line-height: .9; letter-spacing: -.08em; }
.notfound-content a { display: inline-block; padding: 10px; text-decoration: none; border-bottom: 1px solid var(--ember); font-size: 10px; letter-spacing: .15em; }
.notfound-content a:hover { color: var(--fire); }

@media (max-width: 660px) {
  .scene { min-height: 140svh; }
  .scene__scroll-room { height: 140svh; }
  .sound-switch { bottom: calc(71px + env(safe-area-inset-bottom,0px)); left: 18px; }
  .signal { right: 15px; bottom: calc(70px + env(safe-area-inset-bottom,0px)); }
  .signal__trigger { gap: 10px; min-height: 46px; padding: 6px 12px 6px 6px; }
  .signal__orb { width: 33px; height: 33px; }
  .signal__text { font-size: 9px; letter-spacing: .09em; }
  .signal__arrow { width: 14px; }
  .contact-panel { width: min(380px,calc(100vw - 30px)); bottom: calc(100% + 12px); max-height: calc(100dvh - 171px); padding: 17px 17px 18px; border-radius: 17px; }
  .contact-panel__intro { margin-bottom: 13px; }
  .contact-panel form { gap: 10px; }
  .contact-panel h2 { font-size: 31px; }
  .contact-panel__privacy { font-size: 9px; }
  .calcifer-copyright { font-size: 10px; bottom: calc(18px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width: 370px) { .signal__text { letter-spacing: 0; } .signal__trigger { gap: 8px; } .contact-panel { max-height: calc(100dvh - 159px); } }
@media (max-height: 620px) and (min-width: 661px) { .contact-panel { max-height: calc(100dvh - 132px); bottom: calc(100% + 9px); } .signal { bottom: calc(54px + env(safe-area-inset-bottom,0px)); } .sound-switch { bottom: calc(57px + env(safe-area-inset-bottom,0px)); } }
@media (hover:none),(pointer:coarse) { .scene__cursor-glow,.scene__cursor-ember { display: none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; } .scene__cursor-glow,.scene__cursor-ember { display: none!important; } }