/*
Theme Name: Daydreams Atelier
Theme URI:
Author: Patrick Toch
Version: 1.1.0
Description: High-end portfolio theme: smoke intro, step-based stage, angled endless galleries.
*/
/* Wordmark font. Imported here so it works site-wide without touching functions.php.
   (Self-hosting is the GDPR-friendly alternative: see functions-snippet.php.) */
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/* -------------------------------------------------------------
   1. TOKENS & BASE
------------------------------------------------------------- */
:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gold: #c5a059;
  --bar: 11vh;                                   /* intro letterbox bars */
  --hl-room-top: calc(100vh - max(40px, 6vh) - 170px);   /* headline: room state */
  --hl-slider-top: min(max(76px, 9.5vh), 115px);         /* headline: slider state */
}
@supports (height: 100dvh) {
  :root {
    --hl-room-top: calc(100dvh - max(40px, 6dvh) - 170px);
    --hl-slider-top: min(max(76px, 9.5dvh), 115px);
  }
}
@media (max-width: 700px) { :root { --bar: 6vh; } }

/* phones: the headline sits higher so it clears the cue pill; the badge may wrap */
@media (max-width: 700px) {
  :root { --hl-room-top: calc(100vh - 300px); }
  .headline-badge { flex-wrap: wrap; row-gap: 4px; }
  .badge-line { display: none; }
}
@supports (height: 100dvh) {
  @media (max-width: 700px) { :root { --hl-room-top: calc(100dvh - 300px); } }
}

html, body {
  width: 100%;
  height: 100%;
  background: #040406;
  color: #eeeeef;
  font-family: 'Space Grotesk', sans-serif;
  overflow: hidden;              /* the stage is stepped, never scrolled */
  overscroll-behavior: none;
  cursor: default;
}

button:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* -------------------------------------------------------------
   2. ATMOSPHERE: GRAIN, SPOTLIGHT, CURSOR
------------------------------------------------------------- */
.film-grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9990;
}

.ambient-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(850px circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh),
              rgba(197, 160, 89, 0.04), rgba(255, 255, 255, 0.01) 40%, transparent 75%);
  transition: background 0.15s ease-out;
}

.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
}

.custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.52rem;
  font-family: 'Space Mono', monospace;
  letter-spacing: 1.5px;
  color: #fff;
  white-space: nowrap;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s, background 0.3s;
}

.custom-cursor-ring.is-inspect {
  width: 88px;
  height: 88px;
  background: rgba(6, 6, 8, 0.78);
  backdrop-filter: blur(8px);
  border-color: var(--gold);
  color: var(--gold);
}

@media (pointer: coarse) {
  .custom-cursor-dot, .custom-cursor-ring { display: none !important; }
}

/* -------------------------------------------------------------
   3. UNDER-LAYER MENU (revealed by the 3D shift)
------------------------------------------------------------- */
.under-canvas-menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 85% 50%, rgba(197, 160, 89, 0.08), transparent 60%), #050507;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(30px, 6vw, 100px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
}

body.menu-open .under-canvas-menu { pointer-events: auto; opacity: 1; }

.under-menu-content {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.under-menu-badge {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 4px;
  color: var(--gold);
  text-transform: uppercase;
}

.under-menu-nav { display: flex; flex-direction: column; gap: 14px; list-style: none; }

.under-menu-nav a {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #70707a;
  text-decoration: none;
  transition: color 0.25s, transform 0.25s;
  display: inline-block;
}

.under-menu-nav a:hover,
.under-menu-nav a.active {
  color: #ffffff;
  transform: translateX(-10px);
  text-shadow: 0 0 25px rgba(197, 160, 89, 0.35);
}

.under-menu-meta {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  color: #888894;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   4. MAIN FRAME (3D shift when the menu is open)
------------------------------------------------------------- */
.main-site-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: 10;
  transform-origin: center right;
  transition: transform 0.75s var(--ease), box-shadow 0.75s var(--ease), border-radius 0.75s var(--ease);
}

body.menu-open .main-site-frame {
  transform: translateX(-50%) rotate(12deg);
  box-shadow: -40px 50px 120px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  pointer-events: none;
}

/* -------------------------------------------------------------
   5. HEADER, WORDMARK, HAMBURGER
------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px clamp(24px, 5vw, 64px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 950;
  background: linear-gradient(to bottom, rgba(4, 4, 6, 0.92), transparent);
  pointer-events: none;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.6s ease;
}
/* the intro already shows the big wordmark: the header brand arrives once it's gone */
body[data-step="0"] .brand-group { opacity: 0; pointer-events: none; }

.brand-logo-icon { width: 22px; height: 22px; stroke: #ffffff; fill: none; stroke-width: 1.5; }

.brand-title {
  font-family: 'Metal Mania', cursive;
  font-weight: 400;            /* single weight: never fake bold */
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #ffffff;
  line-height: 1;
}

.brand-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  color: #888894;
}

.menu-toggle-btn {
  pointer-events: auto;
  background: rgba(6, 6, 8, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.menu-toggle-btn:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.14); }

.menu-toggle-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #ffffff;
  transition: transform 0.35s ease;
  transform-origin: center;
}

body.menu-open .menu-toggle-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .menu-toggle-btn span:nth-child(2) { transform: translateY(-0px) rotate(-45deg); }

/* -------------------------------------------------------------
   6. STAGE: VIEWS (one fixed layer per section, cross-faded through black)
------------------------------------------------------------- */
.view {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
}

.view.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 10;
  transition: opacity 0.9s var(--ease) 0.3s, visibility 0s;
}

.view:not(.active) * { animation-play-state: paused !important; }
.view.no-anim * { transition: none !important; }   /* used when a view is entered in a given state */

.stage { position: absolute; inset: 0; }

.room-bg-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.room-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: grayscale(100%) brightness(var(--bg-b, 0.68)) contrast(112%);
  transition: opacity 0.9s var(--ease), filter 0.9s var(--ease);
}
.is-slider .room-bg-img { opacity: 0; filter: grayscale(100%) brightness(0); }

@media (max-width: 860px) { .room-bg-img { object-position: 66% center; } }

.room-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 65% 50%, rgba(0,0,0,0.01), rgba(0,0,0,0.92) 85%);
  pointer-events: none;
}

/* painting sitting on the bench; JS positions it, CSS only times the move */
.bench {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  opacity: 0;
  z-index: 50;
  cursor: pointer;
  transform-origin: 50% 50%;
  transform: perspective(1000px) rotateY(353deg) rotateZ(3deg);
  filter: brightness(0.74) contrast(108%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  transition: opacity 0.35s ease;
}
.bench.is-moving {
  transition: opacity 0.35s ease, left 0.95s var(--ease), top 0.95s var(--ease),
              width 0.95s var(--ease), height 0.95s var(--ease),
              transform 0.95s var(--ease), filter 0.95s var(--ease);
}

/* -------------------------------------------------------------
   7. HEADLINE + WATERMARK
------------------------------------------------------------- */
.headline-block {
  position: absolute;
  z-index: 90000 !important;
  left: clamp(24px, 5vw, 64px);
  top: var(--hl-room-top);
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transition: top 0.85s var(--ease);
}
.is-slider .headline-block { top: var(--hl-slider-top); }

.ghost-watermark {
  position: absolute;
  top: -30px;
  left: -14px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(4.2rem, 9.5vw, 10.5rem);
  line-height: 0.85;
  letter-spacing: clamp(6px, 1.2vw, 16px);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.045);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: -1;
  transform-origin: 0% 60%;
  translate: var(--wm-x, 0px) 0;                 /* mouse parallax, set by main.js */
  transition: translate 1.6s var(--ease);
}
.wm-inner { display: inline-block; animation: wmDrift 9s ease-in-out infinite alternate; }

.headline-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

.badge-idx {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 3.5px;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
}

.badge-line { width: 28px; height: 1px; background: rgba(197, 160, 89, 0.7); }

.badge-serif {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  color: #a4a4b0;
}

.headline-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(3.6rem, 8vw, 8rem);
  line-height: 0.88;
  letter-spacing: clamp(3px, 1vw, 8px);
  text-transform: uppercase;
  font-weight: normal;
  color: #ffffff;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.95);
}
.headline-title .word { display: inline-block; white-space: nowrap; }  /* letters never break mid-word */
.headline-title .ch { display: inline-block; }

.headline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #7a7a88;
}
.meta-dot { color: var(--gold); }

/* Entrance effects. main.js adds .play-text to a view when it is entered;
   text is fully visible without it, so a failing script can never hide a heading. */
:root { --text-blur: 14px; }
@media (max-width: 700px) { :root { --text-blur: 6px; } }

@keyframes letterIn   { from { opacity: 0; transform: translateY(55%); filter: blur(var(--text-blur)); } }
@keyframes slideInX   { from { opacity: 0; transform: translateX(-16px); } }
@keyframes lineGrow   { from { transform: scaleX(0); } }
@keyframes riseIn     { from { opacity: 0; transform: translateY(14px); } }
@keyframes watermarkIn{ from { opacity: 0; transform: scale(1.18); } }
@keyframes wmDrift    { from { transform: translateY(0); } to { transform: translateY(-5%); } }

.view.play-text .ghost-watermark { animation: watermarkIn 1.9s var(--ease) 0.5s backwards; }
.view.play-text .badge-idx   { animation: slideInX 0.8s var(--ease) 0.65s backwards; }
.view.play-text .badge-line  { transform-origin: 0% 50%; animation: lineGrow 0.9s var(--ease) 0.75s backwards; }
.view.play-text .badge-serif { animation: slideInX 0.9s var(--ease) 0.9s backwards; }
.view.play-text .headline-title .ch {
  animation: letterIn 1.1s var(--ease) backwards;
  animation-delay: calc(0.6s + var(--i, 0) * 45ms);   /* letter-by-letter */
}
.view.play-text .headline-meta { animation: riseIn 0.9s var(--ease) 1.5s backwards; }

/* -------------------------------------------------------------
   8. SLIDER SHELF (-8deg), CARDS, CUE PILL
------------------------------------------------------------- */
.slider-shelf-wrapper {
  position: absolute;
  bottom: clamp(10px, 2vh, 25px);
  left: 0;
  width: 100%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translate3d(0, 35px, 0);
  pointer-events: none;
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
.is-slider .slider-shelf-wrapper {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.15s;
}

.slider-viewport {
  position: relative;
  width: 138vw;
  margin-left: -19vw;
  overflow: hidden;
  padding: 35px 0;
  transform: rotate(-8deg);
  transform-origin: 50% 50%;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.slider-track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  width: max-content;
  padding-left: clamp(24px, 5vw, 64px);
  will-change: transform;
  user-select: none;
  cursor: grab;
}
.slider-track:active { cursor: grabbing; }

.art-card {
  position: relative;
  flex: 0 0 clamp(220px, 18vw, 320px);
  aspect-ratio: 4 / 5.2;
  background: #090909;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85);
  transition: transform 0.35s var(--ease), border-color 0.3s ease;
}

.art-card-inner { position: relative; width: 100%; height: 100%; overflow: hidden; }

.art-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(18%) contrast(106%);
  transition: transform 0.5s var(--ease), filter 0.4s ease;
  pointer-events: none;
}

/* the dock card stays empty until the bench painting has landed on it */
.art-card img.card-three-img { opacity: 0; transition: opacity 0.35s ease, transform 0.5s var(--ease), filter 0.4s ease; }
.is-docked .art-card img.card-three-img { opacity: 1; }

@media (hover: hover) {
  .art-card:hover { transform: translateY(-8px); border-color: rgba(255, 255, 255, 0.5); }
  .art-card:hover img { transform: scale(1.05); filter: grayscale(0%) contrast(100%); }
}

.card-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: #e0e0ea;
  background: rgba(0, 0, 0, 0.82);
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
  pointer-events: none;
}

.card-label-block {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.8);
  padding: 6px 10px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
  pointer-events: none;
}

.card-label-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.9rem; color: #ffffff; }

.card-label-idx {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888894;
}

.slider-action-bar {
  position: relative;
  z-index: 5;                  /* above the tilted viewport, whose lower-left corner overlaps the arrows */
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: clamp(24px, 5vw, 64px);
}

.nav-arrow-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.nav-arrow-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: #ffffff; }

.slider-drag-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #72727d;
}

.scroll-cue-pill {
  position: absolute;
  bottom: 24px;
  right: clamp(24px, 5vw, 64px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #a0a0ab;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.scroll-cue-pill:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }

@media (max-width: 700px) { .slider-drag-label { display: none; } }
@media (max-width: 520px) { .ghost-watermark { font-size: 3.4rem; } }

/* -------------------------------------------------------------
   9. INTRO (smoke + iris), step 0
------------------------------------------------------------- */
#viewIntro { background: #000; }

#bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  background: var(--intro-bg, none) center / cover no-repeat,
              radial-gradient(ellipse at center, #1c3342 0%, #0a1218 70%, #000 100%);
}
.visual-container { position: absolute; inset: 0; z-index: 1; }

#core-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vmin;
  height: 80vmin;
  z-index: 3;
  background: radial-gradient(circle, rgba(170,230,255,0.75) 0%, rgba(80,160,220,0.2) 40%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
#fog-canvas-fullscreen { position: absolute; inset: 0; z-index: 5; }
#fog-canvas-fullscreen canvas { display: block; width: 100%; height: 100%; }

#vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.7) 100%);
}

#grain {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 9;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.8s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 12% { transform: translate(-5%,3%); } 25% { transform: translate(4%,-6%); }
  37% { transform: translate(-7%,-2%); } 50% { transform: translate(6%,5%); } 62% { transform: translate(-3%,7%); }
  75% { transform: translate(5%,-4%); } 87% { transform: translate(-6%,2%); }
}

.bar { position: absolute; left: 0; width: 100%; height: var(--bar); background: #000; z-index: 30; }
#bar-top { top: 0; }
#bar-bottom { bottom: 0; }

#progress {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bar) + 22px);
  transform: translateX(-50%);
  width: min(200px, 46vw);
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
  z-index: 20;
  background: rgba(255,255,255,0.14);
  transition: opacity 1s ease-out;
}
#progress.hide { opacity: 0; }
#loader-fill { height: 100%; width: 0%; background: rgba(255,255,255,0.85); }

#sound-btn {
  position: absolute;
  top: calc(var(--bar) + 14px);
  right: 14px;
  z-index: 40;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0.7;
  transition: opacity 0.6s;
}
#sound-btn:hover { opacity: 1; }
#sound-btn .x { display: none; }
#sound-btn.off .x { display: inline; }
#sound-btn.off .w { display: none; }
#sound-btn.hint { animation: hint 1.8s ease-in-out infinite; }
#sound-btn.gone { opacity: 0; pointer-events: none; animation: none; }
@keyframes hint { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* wordmark: Metal Mania, letters revealed one by one by intro.js */
#hero-text {
  position: absolute;
  left: 0;
  width: 100%;
  top: 63vh;
  top: 63dvh;
  z-index: 15;
  pointer-events: none;
  text-align: center;
  padding: 0 4vw;
}

#title {
  margin: 0;
  font-family: 'Metal Mania', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 10.5vw, 8.5rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0 40px rgba(150,220,255,0.5), 0 0 120px rgba(80,160,220,0.35);
  opacity: 0;
}
#title.is-ready { opacity: 1; }
#title span { display: inline-block; opacity: 0; }

#subtitle {
  margin: 1.4em 0 0;
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.7rem, 1.4vw, 0.95rem);
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0;
}

#scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bar) + 26px);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  font: 400 11px/1 'Space Mono', monospace;
  letter-spacing: 0.18em;
}
#scroll-hint span, #scroll-hint i { opacity: 0; }
#scroll-hint i { position: relative; display: block; width: 1px; height: 46px; overflow: hidden; background: rgba(255,255,255,0.18); }
#scroll-hint i::after {
  content: '';
  position: absolute;
  left: 0;
  top: -50%;
  width: 100%;
  height: 50%;
  background: #fff;
  animation: drop 2.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes drop { from { top: -50%; } to { top: 100%; } }

/* fallback: no WebGL / reduced motion / libs missing -> static finished hero */
.intro-static #fog-canvas-fullscreen,
.intro-static #core-glow,
.intro-static #grain,
.intro-static #progress,
.intro-static #sound-btn,
.intro-static .bar { display: none; }
.intro-static #bg-image { filter: brightness(0.8); }
.intro-static #title { opacity: 1; }
.intro-static #subtitle { opacity: 0.85; }
.intro-static #scroll-hint span,
.intro-static #scroll-hint i { opacity: 1; }

/* -------------------------------------------------------------
   10. SHARED-ELEMENT MORPH + DETAIL VIEWER
------------------------------------------------------------- */
.morph-active-image {
  position: fixed;
  z-index: 2500;
  pointer-events: none;
  will-change: transform, top, left, width, height, border-radius;
  transition: transform 0.65s var(--ease), top 0.65s var(--ease), left 0.65s var(--ease),
              width 0.65s var(--ease), height 0.65s var(--ease), border-radius 0.65s ease, box-shadow 0.65s ease;
}

.detail-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: background 0.45s ease, opacity 0.4s ease, backdrop-filter 0.45s ease;
}

.detail-viewer-overlay.active {
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(30px);
  opacity: 1;
  pointer-events: auto;
}

.viewer-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(35px, 5vw, 80px);
  width: 92%;
  max-width: 1300px;
  max-height: 90vh;
}

.viewer-media-slot {
  flex: 0 0 auto;
  position: relative;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer-content-pane { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.viewer-lot-badge {
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 3.5px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s var(--ease) 0.1s;
}

.viewer-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 4.8rem);
  line-height: 0.92;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.55s var(--ease) 0.16s;
}

.viewer-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: #888894;
  margin-bottom: 24px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.55s var(--ease) 0.2s;
}

.viewer-provenance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 24px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.55s var(--ease) 0.24s;
}

.prov-col span {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  color: #666672;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.prov-col strong { font-size: 0.85rem; color: #f2f2f5; font-weight: 500; }

.viewer-desc {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.7;
  color: #bababf;
  max-width: 500px;
  margin-bottom: 30px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.55s var(--ease) 0.28s;
}

.viewer-action-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.55s var(--ease) 0.32s;
}

.inquire-btn {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #000000;
  padding: 12px 26px;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.25s, color 0.25s;
}
.inquire-btn:hover { background: transparent; color: #ffffff; }

.viewer-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 12px 24px;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.25s, border-color 0.25s;
}
.viewer-close-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

.detail-viewer-overlay.active .viewer-lot-badge,
.detail-viewer-overlay.active .viewer-title,
.detail-viewer-overlay.active .viewer-subtitle,
.detail-viewer-overlay.active .viewer-provenance-grid,
.detail-viewer-overlay.active .viewer-desc,
.detail-viewer-overlay.active .viewer-action-bar { transform: translateY(0); opacity: 1; }

@media (max-width: 860px) {
  .viewer-layout { flex-direction: column; max-height: 85vh; overflow-y: auto; }
  .viewer-media-slot { max-width: 85vw; max-height: 48vh; }
}

@media (max-width: 480px) {
  .viewer-provenance-grid { grid-template-columns: 1fr; }
  .viewer-action-bar { flex-direction: column; align-items: stretch; }
  .inquire-btn, .viewer-close-btn { width: 100%; text-align: center; }
}

/* -------------------------------------------------------------
   11. REDUCED MOTION
------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .view, .view * { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}