/* Same height for both rail previews */
:root{
  --rail-item-h: 320px;          /* desktop default */
}
@media (max-width: 768px){
  :root{ --rail-item-h: 170px; } /* mobile */
}


/* === Interaction Background === */
@property --t {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

@keyframes tick {
  from { --t: 0; }
  to   { --t: 86400000; } /* one day in ms */
}
.interaction-section {
  position: relative;               /* host the stacking context */
  width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* background-color: #121212; */
        isolation: isolate;         /* contain blending to this section */


}
.interaction-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* keep it decorative */
  animation: tick 86400000ms linear infinite;

}

#bg-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 50), 1fr);
  gap: 0 6px;
  font-family: monospace;
  font-size: 10px;
  line-height: 1;
  padding: 12px;
  position: absolute;
  inset: 0;
  z-index: -1;     
}

#bg-grid > div {
  /* normalized coordinates -> offsets from center */
  --offset-x: calc(var(--x) - 0.5);
  --abs-x: calc(max(var(--offset-x), -1 * var(--offset-x)));
  --offset-y: calc(var(--y) - 0.5);
  --abs-y: calc(max(var(--offset-y), -1 * var(--offset-y)));

  /* color driven by position + animated --t */
  --l: calc(sin(var(--abs-x) / sin(var(--abs-y) * 3.6) * 3 - var(--t) / 400) * 100%);
  --h: calc(var(--abs-x) * 365deg);

  color: hsl(var(--h) 50% max(var(--l), 6%));
  white-space: pre;
}



.interaction-content {
  position: relative;
  z-index: 0; /* keep foreground above */
max-height: 100vh;
}

#ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
      left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #121212;
      pointer-events:none;          /* <— important */

}

.interaction-slider{
 min-height:100vh;

  display:grid;
  grid-template-columns: 1fr auto 1fr;    /* left preview | phone | right preview */
  align-items:center; justify-items:center;
  gap: clamp(28px, 6vw, 80px);
  padding:0; position:relative;
z-index: 1;
    isolation: isolate;         /* contain blending to this section */
  width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  
      /* --spot-x: -10%;
  --spot-y: -10%;
  --spot-size: 520px;         
  --spot-intensity: .18;     */
  overflow: hidden;                 /* keep bg clipped to section */

}



.interaction-slider::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;                 /* behind rails/phone content */
  opacity: 0;                 /* fade in on hover via class below */
  transition: opacity .28s ease;

  /* Soft glow that follows --spot-x/--spot-y */
  background:
    radial-gradient(
      circle var(--spot-size) at var(--spot-x) var(--spot-y),
      rgba(255,255,255,var(--spot-intensity)) 0%,
      rgba(255,255,255,0.08) 45%,
      rgba(255,255,255,0.00) 65%
    );

  /* Looks great on dark #121212 background */
  mix-blend-mode: screen;
}

/* Optional: slightly different blend in dark theme */
.dark-theme .interaction-slider::before{
  mix-blend-mode: lighten;
}

/* Turn the glow on while hovered */
.interaction-slider.is-spot-active::before{
  opacity: 1;
}




.phone{
  grid-column:2; position:relative;
  width: clamp(300px, 36vw, 420px);;
  --screen-x: 9%; --screen-y: 6%; --screen-w: 82%; --screen-h: 88%;
  --screen-radius: 36px; --bleed: 3px; z-index:10;
}
.phone .bezel{ position:relative; z-index:60; width:100%; height:auto; display:block; pointer-events:none; }
.screen{
  position:absolute; z-index:20;
  left: calc(var(--screen-x) - var(--bleed));
  top:  calc(var(--screen-y) - var(--bleed));
  width: calc(var(--screen-w) + var(--bleed)*2);
  height: calc(var(--screen-h) + var(--bleed)*2);
  border-radius: calc(var(--screen-radius) + var(--bleed));
  overflow:hidden; isolation:isolate; display:grid; place-items:center;
}
/* Transparent phone screen (no black fill) */
.screen-bg{
  position:absolute;
  inset:0;
  background: transparent;   /* was #0E1118 */
  pointer-events:none;
}

.screen-overlay{
  position:absolute; z-index:40;                 /* under bezel, over screen */
  left: calc(var(--screen-x) - var(--bleed));
  top:  calc(var(--screen-y) - var(--bleed));
  width: calc(var(--screen-w) + var(--bleed)*2);
  height: calc(var(--screen-h) + var(--bleed)*2);
  border-radius: calc(var(--screen-radius) + var(--bleed));
  pointer-events:none;                            /* overlay is display-only */
  overflow:visible;
}

.pane{ position:relative; width:100%; height:100%; display:grid; place-items:center; }
/* Soft cross-fade when the new pane mounts */
/* Crossfade on new pane */
.pane.fade-enter{ opacity:0; }
.pane.fade-enter-active{
  opacity:1;
  transition: opacity 200ms ease-in-out;
}


/* Exit (current pane fades out) */
#active-pane > .fade-exit { opacity: 1; }
#active-pane > .fade-exit-active {
  opacity: 0;
  transition: opacity 220ms ease;
}

/* Enter (next pane slides in) */
#active-pane > .slide-enter {
  opacity: 0;
  transform: translateY(16px);
}
#active-pane > .slide-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 320ms cubic-bezier(.22,.61,.36,1),
    opacity 260ms ease;
}


@media (prefers-reduced-motion: reduce){
  .ghost-fly{ filter:none !important; }
  .pane.fade-enter, .pane.fade-enter-active{ transform:none; transition:none; }
}


.rail,
.phone,
.screen,
.screen-overlay,
.mobile-rail {
  z-index: 20;
}

/* If you still see bleed, push even higher for the rails specifically */
.rail-left,
.rail-right {
  z-index: 20;
}


/* Left/Right single previews */
.rail{ opacity:.35; }
.rail-left{ grid-column:1; justify-self:end; }
.rail-right{ grid-column:3; justify-self:start; }
.preview{
  width: min(260px, 28vw);
  transform: scale(.94);
  transition: opacity .25s ease, transform .25s ease;
  cursor:pointer;

}
.preview:hover{ opacity:.9; transform: scale(.98); }
.preview *{ pointer-events:none; }

#rail-left, #rail-right{
  display: grid;
  align-content: center;         /* centers the single preview vertically */
}

#rail-left .preview,
#rail-right .preview{
  height: var(--rail-item-h);
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  border-radius: 14px;  
     /* optional, keep your style */

}

/* Make whatever is inside the preview fit nicely */
#rail-left .preview > *,
#rail-right .preview > *{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

}
/* Mobile bottom rail */
.mobile-rail{
  grid-column: 1 / -1;
  margin-top: 8px;
  display:none;
  width:100%;
}
.mobile-rail-track{
  display:flex; gap:12px; overflow-x:auto; padding:8px 6px 2px;
  scroll-snap-type: x mandatory;
}
.mobile-rail .preview{
  width: 160px; flex: 0 0 auto; scroll-snap-align: center;
}



/* Ghost that flies into the phone */
.ghost-fly{
  position:absolute;   /* note: absolute INSIDE the overlay */
  left:50%; top:50%;
  transform: translate(-50%, -50%); /* will be overridden by JS */
  will-change: transform, opacity;
  z-index: 0;          /* already under bezel because parent is z:50 */
  pointer-events:none;
}

/* keep card sizes consistent inside the phone */
.pane-inner{
  width: min(88%, 340px);
  height: 420px;               /* fixed inner frame for all features */
  display: grid; place-items:center;
}

/* ===== Responsive ===== */
@media (max-width: 720px){
  #rail-left, #rail-right{ display:none }
  .mobile-rail{ display:block }
  .pane{ height: 240px } /* a touch taller on mobile to balance space */
  .screen{
 place-items:center;
    --screen-y: -10%;
    --screen-h: 100%;
  }

}
@media (max-width: 1100px){
  #rail-left, #rail-right{ display:none }
  .mobile-rail{ display:block }
  .pane{ height: auto;
  width: 90%; } /* a touch taller on mobile to balance space */
  .screen{
 place-items:center;
    --screen-y: -8%;
    --screen-h: 100%;

  }
img.bezel{
  display: block;

  max-height: 35rem !important;

}
}
@media (max-height: 800px){

 
  .pane{ height: auto;
  width: 90%; } /* a touch taller on mobile to balance space */
  .screen{
 place-items:center;
    --screen-y: -2%;
    --screen-h: 100%;

  }
img.bezel{
  display: block;

  max-height: 45rem !important;

}
}




/* === Your Braun visuals (unchanged) === */
.braun{
  width: min(88%, 340px);
  border-radius: 10px; overflow: hidden;
  background: var(--shell, #efede8);
  box-shadow: 0 14px 34px rgba(0,0,0,.15),
              inset 0 0 0 1px #ffffff30,
              inset 0 -12px 24px rgba(0,0,0,.06);
  color:#111;
}
.grill{
  padding:10px 12px 6px;
  background:linear-gradient(#efede8, #e9e6df);
  border-bottom:1px solid #0001;
}
.slat{
  height:8px; border-radius:6px; margin:6px 0;
  background: var(--slat-off, #f2d7c7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.25);
  transition: background-color .25s ease, opacity .25s ease;
  transition-delay: calc(var(--i) * 4ms);
}
.slat.on{ background: var(--accent, #ff7a00); opacity:1; }
/* predefine --i for 18 */
.grill .slat:nth-child(1){--i:1} .grill .slat:nth-child(2){--i:2} .grill .slat:nth-child(3){--i:3}
.grill .slat:nth-child(4){--i:4} .grill .slat:nth-child(5){--i:5} .grill .slat:nth-child(6){--i:6}
.grill .slat:nth-child(7){--i:7} .grill .slat:nth-child(8){--i:8} .grill .slat:nth-child(9){--i:9}
.grill .slat:nth-child(10){--i:10} .grill .slat:nth-child(11){--i:11} .grill .slat:nth-child(12){--i:12}
.grill .slat:nth-child(13){--i:13} .grill .slat:nth-child(14){--i:14} .grill .slat:nth-child(15){--i:15}
.grill .slat:nth-child(16){--i:16} .grill .slat:nth-child(17){--i:17} .grill .slat:nth-child(18){--i:18}
.face{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:14px 14px 16px;
  background:linear-gradient(#eeeae3, #e7e4de);
  border-top:1px solid #ffffff70;
}
.brand{ font-size:12px; letter-spacing:2px; font-weight:700; color:#222; }
.dial-wrap{ position:relative; width:118px; height:72px; display:grid; place-items:center; }
#volume{ position:absolute; inset:0; opacity:0; pointer-events:none; }
#dialWrap{ touch-action:none; }
.dial{
  --angle:-100; position:relative; z-index:1; width:54px; height:54px; border-radius:999px; border:0;
  background: radial-gradient(60% 60% at 30% 30%, #fff, #eae6df 40%, #d4cec4 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.25),
              inset 0 -6px 10px rgba(0,0,0,.18),
              inset 0 2px 6px rgba(255,255,255,.75);
  transform: rotate(calc(var(--angle) * 1deg));
  transition: transform .08s ease-out; cursor: grab; touch-action: none;
}
.dial:active{ cursor:grabbing; }
.dial .marker{ position:absolute; top:6px; left:50%; width:4px; height:10px; translate:-50% 0; border-radius:2px; background:var(--accent, #ff7a00); box-shadow: inset 0 1px 0 #fff8; }
.ticks{ position:absolute; inset:0; pointer-events:none; display:flex; justify-content:space-between; align-items:flex-end; padding:10px 4px 4px; color:#444; font-size:12px; }
.ticks span:nth-child(1){ translate:0 -2px } .ticks span:nth-child(4){ translate:0 -2px }

.img-feature{ width:min(88%, 340px); margin:0; border-radius:12px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.35); }
.img-feature img{ display:block; width:100%; height:auto; }
.cards{ display:grid; gap:12px; width:min(88%, 340px); }
.card{ background:#f2f2f2; color:#111; border-radius:12px; padding:14px 16px; box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 0 0 1px #ffffff40; }
.card h4{ margin:0 0 6px; font-size:15px; } .card p{ margin:0; font-size:13px; color:#333; }

@media (max-width: 720px){ .rail-left, .rail-right, .ticks { display:none; };
.braun{box-shadow: none;}

}






/* ===== Rams speaker ===== */
/* ===== Rams container with a top + bottom face ===== */
.rams{
  width:min(88%, 340px);
  border-radius:12px;
  overflow:hidden;
  background: var(--shell, linear-gradient(#efefec, #e9e9e6));
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 0 0 1px #ffffff50,
    inset 0 -10px 18px rgba(0,0,0,.06);
  color:#111;
}

/* Top (perforated) */
.rams-top{
  padding:18px 18px 12px;
  background:linear-gradient(#efefec, #ecece8);
  border-bottom:1px solid #00000010;
}
/* Square speaker field so the circle is true */
.rams-grid{
  position:relative;
  width: min(95%, 360px);   /* larger max size */
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  background: transparent;

  --dot-color:#111;
  --flash:#FF7A00;
}

/* Dots use the idle color by default */
.rams-grid .dot{
  position:absolute;
  border-radius:50%;
  background: var(--dot-color);
  transform: translate(-50%, -50%);
}

/* Bottom face, like the Braun face */
.rams-face{
  display:flex;
  justify-content:center;   /* center horizontally */
  align-items:center;
  padding:16px;
  background:linear-gradient(#eeeae3, #e7e4de);
  border-top:1px solid #ffffff70;
}

.rams-buttons{
  display:flex;
  gap:14px;   /* spacing between buttons */
}


/* Retro/realistic palette buttons */


.rams-btn{
  --swatch: #ccc;
  position:relative;
  width:30px; height:30px;
  border-radius:50%;
  border:none;
  cursor:pointer;

  /* matte cap with soft shading */
  background: var(--swatch);
  background: linear-gradient(145deg, var(--swatch), color-mix(in srgb, var(--swatch) 80%, black));
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.6),    /* top edge light */
    inset 0 -3px 6px rgba(0,0,0,.25),        /* bottom curve */
    0 4px 8px rgba(0,0,0,.3);                /* outer drop */

  transition: transform .1s ease, box-shadow .1s ease;
}

/* subtle highlight ring */
.rams-btn::before{
  content:"";
  position:absolute; inset:2px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.4);
  pointer-events:none;
}

/* pressed look */
.rams-btn:active{
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.3),
    inset 0 -1px 2px rgba(255,255,255,.3),
    0 2px 4px rgba(0,0,0,.4);
}
/* Flash to --flash then return to --dot-color */
@keyframes flash-color {
  0%   { background: var(--dot-color); }
  50%  { background: var(--flash); }
  100% { background: var(--dot-color); }
}

/* (Optional) respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .rams-grid .dot{ animation: none !important; }
}




/* ===== Analog EQ panel ===== */
.eq{
  width:min(88%, 340px);
  border-radius:12px;
  overflow:hidden;
  background: linear-gradient(#efefec,#e9e9e6);
  box-shadow: 0 14px 34px rgba(0,0,0,.28),
              inset 0 0 0 1px #ffffff50,
              inset 0 -10px 18px rgba(0,0,0,.06);
  color:#111;
  
}

/* ----- Top: dot bars ----- */
.eq-top{
  padding:18px 18px 12px;
  background:linear-gradient(#efefec,#ecebe7);
  border-bottom:1px solid #00000010;
    height: 328px;  
}

.eq-grid{
  --cols: 7;
  --rows: 21;
  --gap: 6px;
  --dot: 8px;
  --dot-color:#222;
  --flash:#ff6b3d;

  display:grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: var(--gap);
  width:100%;
  height:140px; /* important */
  margin:0 auto;
  position:relative;
}
.eq-dot{
  width:var(--dot); height:var(--dot);
  border-radius:50%; margin:auto;
  background:var(--dot-color);
  opacity:.25; transition:opacity .28s ease;
}
.eq-dot.on{ opacity:1; }

/* Flash to --flash then back */
@keyframes eq-flash{
  0%   { background: var(--dot-color); }
  50%  { background: var(--flash); }
  100% { background: var(--dot-color); }
}

/* ----- Bottom: sliders row ----- */

/* Bottom face now contains one horizontal slider */
.eq-face{
  padding: 16px 16px 14px;
  background:linear-gradient(#eeeae3, #e7e4de);
  border-top:1px solid #ffffff70;
}

/* Speed row */
.eq-speed{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
}
.eq-speed-label{
  font-size:10px;
  color:#444;
  letter-spacing:.06em;
}

/* Horizontal range styling */
#eqSpeed{
  appearance:none;
  width:100%;
  height:8px;
  border-radius:6px;
  background: linear-gradient(#e7e4de,#d9d6cf);
  border:1px solid #bcb9b2;
  outline:none;
  margin:0;
}

/* Thumb */
#eqSpeed::-webkit-slider-thumb{
  appearance:none;
  width:18px; height:12px; border-radius:3px;
  background: linear-gradient(#f6f6f6,#cfcfcf);
  border:1px solid #9b9b9b;
  box-shadow: 0 4px 10px rgba(0,0,0,.25), inset 0 1px 2px rgba(255,255,255,.6);
}
#eqSpeed::-moz-range-thumb{
  width:18px; height:12px; border-radius:3px;
  background: linear-gradient(#f6f6f6,#cfcfcf);
  border:1px solid #9b9b9b;
  box-shadow: 0 4px 10px rgba(0,0,0,.25), inset 0 1px 2px rgba(255,255,255,.6);
}




/* ===== Calculator (Braun-inspired, reference style) ===== */
.calculator {
  width: min(88%, 320px);
  margin: auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--shell, linear-gradient(#efefec, #e9e9e6));
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 0 0 1px #ffffff50,
    inset 0 -10px 18px rgba(0,0,0,.06);
  color: #111;
  display: grid;
  gap: .5rem;
  padding: 1rem;
}


.calc-display {
    position: relative;
  background: #111;
  color: #f8f8f8;
  border-radius: 8px;
  padding: 1rem;
  text-align: right;
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08),
              inset 0 -8px 14px rgba(0,0,0,.45);
}
.calc-output {
  display: inline-block;
  color: #f8f8f8;            /* always white */
  transition: color 200ms ease;
}

.calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

.calc-key {
  background: #f2f2f2;
  border: none;
  border-radius: 6px;
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.15);
  transition: transform .1s, box-shadow .1s;
}

.calc-key:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.calc-key.accent {
  background: #ff6b3d;
  color: white;
}

.calc-key.zero {
  grid-column: span 2;
  color: #ff6b3d;
}

/* a tiny pop while shuffling */
@keyframes shufflePop {
  0%   { filter:none; transform:translateY(0) }
  35%  { filter:blur(1px) brightness(1.15); transform:translateY(-1px) }
  100% { filter:none; transform:translateY(0) }
}
.calc-output.shuffling { animation: shufflePop 260ms ease; }

/* Rails preview cleanup */
.preview .calc-display { font-size: 1rem; padding:.5rem; }
.preview .calc-key { pointer-events: none; }



/* ==== Photo Viewer (exact to screenshot) ==== */
.photo-viewer{
  background:#efede8; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; width:92%
}
.pv-top{
  height:240px; display:grid; place-items:center;
  background:linear-gradient(#f4f2ee,#ebe8e3);
}
.pv-screen{
  width:92%;  height: 240px;    
  display:grid; place-items:center;
    overflow: hidden;        /* crop overflow from object-fit:cover */
  
}
.pv-img{ max-width:100%; max-height:100%; object-fit:cover; }

.pv-face{ background:#e9e6e0; border-top:1px solid #0001; padding:24px 14px; }
.pv-brand{
  font:600 12px/1.1 Inter, system-ui, sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:#333; margin-bottom:16px;
}
.pv-controls{
  display:flex; justify-content:space-between; align-items:center;
}
.pv-btn{
  background:none; border:0; padding:0; cursor:pointer;
  font:400 10px/1 Inter, system-ui, sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:#6c6c6c;
}
.pv-btn:focus-visible{ outline:2px solid #aaa; outline-offset:2px; }

/* Tighter proportions in the side-rail previews */
.preview .photo-viewer{ border-radius:10px; }
.preview .pv-top{ height:240px; }
.preview .pv-screen{ height:82%; }


/* --- Responsive: mobile tweaks --- */
@media (max-width: 768px) {
  .photo-viewer{
  background:#efede8; border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;

}
  .pv-screen {
    height: auto;              /* let it scale with width */
    aspect-ratio: 4 / 3;       /* keeps consistent box height */
  }
  .pv-top{
  height:140px; display:grid; place-items:center;
  background:linear-gradient(#f4f2ee,#ebe8e3);
}
  .pv-btn{
  background:none; border:0; padding:0; cursor:pointer;
  font:300 8px/1 Inter, system-ui, sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:#6c6c6c;
}
.pv-brand{
  font:400 10px/1.1 Inter, system-ui, sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:#333; margin-bottom:16px;
}
.pv-face{ background:#e9e6e0; border-top:1px solid #0001; padding:12px 14px; }
}

/* Even smaller devices */
@media (max-width: 480px) {
  .pv-screen {
    aspect-ratio: 1 / 1;       /* square viewer on very small screens */
  }
}











/* ===== Weather Station (Braun theme) ===== */
.weather-station{
  background:#efede8; border-radius:12px; overflow:hidden; width: 86%;
  display:flex; flex-direction:column;
}

/* Top box (responsive like the viewer) */
.ws-top{
  height:240px; display:grid; place-items:center;
  background:linear-gradient(#f4f2ee,#ebe8e3);
}
@media (max-width:768px){ .ws-top{ height:auto; aspect-ratio:4/3; } }
@media (max-width:480px){ .ws-top{ aspect-ratio:1/1; } }

.ws-screen{
  width:92%; height:86%; background:#0d0f14;
  display:grid; place-items:center;
  border-radius:12px; box-shadow:inset 0 0 0 1px #0001;
  overflow:hidden;
}

/* Split-flap */
.flap-stack{
  position:relative; perspective:900px;
  width:min(92%, 420px); height:min(38%, 120px);
}
.flap{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font:700 clamp(28px,7vw,56px)/1.05 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.02em;
  color:#e7ecef; background:#0d1117;
  border-radius:8px; box-shadow:inset 0 -1px 0 #ffffff0d, 0 1px 2px #0003;
  backface-visibility:hidden;
}
.flap.next{ transform:rotateX(90deg); transform-origin:top; }
.flap.current{ transform:rotateX(0deg); transform-origin:bottom; }

/* flip animation */
.flipping .current{ animation:flapOut 260ms ease-in forwards; }
.flipping .next{ animation:flapIn 260ms 140ms ease-out forwards; }

@keyframes flapOut { to { transform:rotateX(-90deg); } }
@keyframes flapIn  { to { transform:rotateX(0deg); } }

/* Face (label + controls) */
.ws-face{ background:#e9e6e0; border-top:1px solid #0001; padding:24px 14px; }
.ws-brand{
  font:600 12px/1.1 Inter, system-ui, sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:#333; margin-bottom:14px;
}
.ws-controls{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.ws-mode{
  font:600 12px/1 Inter, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#6c6c6c;
}
.ws-btn{
  background:none; border:0; padding:0; cursor:pointer;
  font:400 10px/1 Inter, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#6c6c6c;
}
.ws-btn:focus-visible{ outline:2px solid #aaa; outline-offset:2px; }

/* Previews in the side rails */
.preview .ws-top{ height:240px; }
.preview .ws-screen{ width: 92%;; }
.preview .flap-stack{ height:70px; }
.preview .flap{ font-size: clamp(18px,4.2vw,28px); }





/* ===== AI Demo Simulation ===== */
.ai-demo{
  background:#efede8; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
}

.ai-top{
  height:240px; display:grid; place-items:center;
  background:linear-gradient(#f4f2ee,#ebe8e3);
}
@media (max-width:768px){ .ai-top{ height:auto; aspect-ratio:4/3; } }
@media (max-width:480px){ .ai-top{ aspect-ratio:1/1; } }

.ai-screen{
  width:92%; height:86%; background:#0d0f14;
  display:flex; flex-direction:column;
  border-radius:12px; box-shadow:inset 0 0 0 1px #0001;
  overflow:auto; padding:12px; gap:8px;
  color:#e7ecef; font:14px/1.4 Inter, system-ui, sans-serif;
}
.ai-chat{ display:flex; flex-direction:column; gap:8px; }
.ai-message{
  max-width:80%; padding:8px 12px; border-radius:10px; word-wrap:break-word;
  animation: fadeIn .3s ease both;
}
.ai-message.user{ align-self:flex-end; background:#ff7a1a; color:#fff; }
.ai-message.bot{ align-self:flex-start; background:#2c2f36; color:#e7ecef; }

@keyframes fadeIn {
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

.ai-face{ background:#e9e6e0; border-top:1px solid #0001; padding:12px 14px; }
.ai-brand{
  font:600 12px/1.1 Inter, system-ui, sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:#333; margin-bottom:8px;
}
.ai-input-row{ display:flex; gap:6px; }
.ai-input{
  flex:1; padding:8px 10px; border-radius:6px; border:1px solid #bcb9b2;
  font:14px Inter, system-ui, sans-serif; outline:none;
}
.ai-send{
  background:#ff7a1a; color:#fff; border:0; border-radius:6px;
  padding:8px 14px; cursor:pointer; font:600 13px Inter, sans-serif;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.ai-send:active{ transform:translateY(1px); }





/* ===== Transpersonal Mask (3D) ===== */
.mask3d{
  background:#efede8; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
}

/* Top box sizing (same rhythm as others) */
.mask3d-top{
  height:320px; display:grid; place-items:center;
  background:linear-gradient(#f4f2ee,#ebe8e3);
}
@media (max-width:768px){ .mask3d-top{ height:auto; aspect-ratio:4/3; } }
@media (max-width:480px){ .mask3d-top{ aspect-ratio:1/1; } }

/* 3D stage */
.mask-stage{
  width:92%; height:86%; border-radius:12px; overflow:hidden;
 box-shadow:inset 0 0 0 1px #0001;
  display:grid; place-items:center;
  perspective: 900px;
}

/* the card we tilt */
.mask-card{
  --rx: 0deg;          /* rotateX */
  --ry: 0deg;          /* rotateY */
  --tz: 36px;          /* slight pop-out */
  position:relative;
  width:min(50%, 360px); aspect-ratio: 3 / 4;
  transform-style:preserve-3d;
  transform: translateZ(var(--tz)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 60ms linear;
  will-change: transform;
  border-radius:16px;
  overflow:hidden;
  box-shadow:
    0 12px 30px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35);

}

/* mask image */
.mask-img{
  width:100%; height:100%; object-fit:cover; display:block;
  backface-visibility:hidden;
  cursor: grab;
}

/* moving light sheen (reacts to tilt) */
.mask-card::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at calc(50% + var(--light-x,0%)) calc(30% + var(--light-y,0%)),
              rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
  pointer-events:none;
  mix-blend-mode: screen;
}

/* subtle breathing (disabled while dragging) */
@keyframes mask-breathe {
  0%,100% { transform: translateZ(36px) rotateX(-2deg) rotateY(-1.5deg); }
  50%     { transform: translateZ(42px) rotateX( 2deg) rotateY( 1.5deg); }
}
.mask-card.idle { animation: mask-breathe 6.4s ease-in-out infinite; }

/* bottom bar */
.mask-face{ background:#e9e6e0; border-top:1px solid #0001; padding:18px 14px; }
.mask-brand{
  font:600 12px/1.1 Inter, system-ui, sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:#333; margin-bottom:10px;
}
.mask-controls{ display:flex; justify-content:space-between; align-items:center; }
.mask-hint{
  font:600 11px/1 Inter, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#6c6c6c;
}
.mask-btn{
  background:none; border:0; padding:0; cursor:pointer;
  font:600 12px/1 Inter, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#6c6c6c;
}
.mask-btn:focus-visible{ outline:2px solid #aaa; outline-offset:2px; }

/* rail preview */
.preview .mask3d-top{ height:320px; }
.preview .mask-stage{ perspective:700px; }
.preview .mask-card{ width:78%; }









/* ===== Healing Places (shares photo-viewer pane) ===== */
/* ===== Healing Places (shares the photo-viewer pane) ===== */
.photo-viewer.healing .pv-screen{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: none;                       /* soft, immersive feel */
  transition: --reveal 950ms cubic-bezier(.19,.71,.22,1);
  height: 90%;
}



.photo-viewer.healing .pv-top{
  height:340px; display:grid; place-items:center;
  background:linear-gradient(#f4f2ee,#ebe8e3);
}
.photo-viewer.healing .hp-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; 
  transition:
    opacity 900ms cubic-bezier(.19,.71,.22,1),
    transform 1500ms cubic-bezier(.18,.8,.2,1),
    filter 1200ms ease;
  will-change: opacity, transform, filter;
 
}
.photo-viewer.healing .hp-img.night  { z-index:0; transform: scale(1.00); }
.photo-viewer.healing .hp-img.sunset {
  z-index:1; opacity:0; transform: scale(1.02);
  filter: saturate(1.06) contrast(1.04) brightness(1.02);
  /* cursor-follow radial mask; radius grows with --reveal */
  -webkit-mask-image: radial-gradient(
    circle at var(--cx) var(--cy),
    rgba(0,0,0,var(--reveal)) 0%,
    rgba(0,0,0,var(--reveal)) calc(18% + 22%*var(--reveal)),
    transparent 60%
  );
  mask-image: radial-gradient(
    circle at var(--cx) var(--cy),
    rgba(0,0,0,var(--reveal)) 0%,
    rgba(0,0,0,var(--reveal)) calc(18% + 22%*var(--reveal)),
    transparent 60%
  );
}
.photo-viewer.healing .pv-screen.is-hovered .hp-img.sunset{ opacity:1; }

/* warm glaze that blooms with reveal */
.photo-viewer.healing .hp-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 110%,
      rgba(255,140,30,0) 0%,
      rgba(255,140,30,0.12) 35%,
      rgba(255,140,30,0.22) 60%,
      rgba(0,0,0,0.0) 100%);
  opacity: calc(.25 * var(--reveal));
  transition: opacity 900ms cubic-bezier(.19,.71,.22,1);
  mix-blend-mode: screen;
}

/* subtle film grain for texture */
.photo-viewer.healing .hp-grain{
  position:absolute; inset:-20%; pointer-events:none;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  opacity:.06; mix-blend-mode:soft-light;
  animation: hpGrainShift 12s linear infinite;
}
@keyframes hpGrainShift {
  0% { transform: translate3d(0,0,0) }
  100% { transform: translate3d(-140px,-140px,0) }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .photo-viewer.healing .hp-img,
  .photo-viewer.healing .hp-glow{
    transition: none !important;
  }
  .photo-viewer.healing .hp-img.sunset{ -webkit-mask-image:none; mask-image:none; }
}