/* Layer 1: the room — fixed scene, rain canvas, vignette and the two torches. */
.room { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--void); }
.room-scene { position: absolute; inset: 0; background: var(--room-image) center / cover no-repeat; }
.room-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(5,7,10,.75) 100%); }
.rain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-effects="off"] .rain-canvas, html[data-effects="off"] .hero-rain { display: none; }

/* Parallax: the whole room drifts a few pixels against the pointer. */
.room-scene, .rain-canvas, .room-flash { transform: translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -9px)) scale(1.035); transition: transform .9s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.room-flash { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 38%, rgba(220, 232, 255, .9), rgba(160, 190, 255, .35) 60%, transparent 100%); opacity: var(--flash, 0); mix-blend-mode: screen; }
.room-grain { position: absolute; inset: 0; opacity: .07; 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Torches: real elements, clickable, vertically centred on both edges. */
.torch {
  position: fixed; top: 50%; z-index: 2; width: 120px; height: 300px; margin-top: -150px; padding: 0; border: 0; background: none;
  --lit: 1; --flick: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* --tx/--ty are computed by effects.js from the room's parallax transform, so the torch stays nailed to the wall */
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--torch-scale, 1)); transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.torch-left { left: calc(2.5vw - 60px); } .torch-right { right: calc(2.5vw - 60px); }
@media (max-width: 1500px) { .torch { --torch-scale: .8; } }
@media (max-width: 1300px) { .torch { --torch-scale: .66; } }
.torch:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 20px; }
.torch-glow {
  position: absolute; left: 50%; top: 40px; width: 820px; height: 820px; margin: -410px 0 0 -410px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--torch-light), .5) 0%, rgba(var(--torch-light), .2) 26%, rgba(var(--torch-light), .06) 48%, transparent 64%);
  mix-blend-mode: screen; opacity: calc(var(--lit) * (0.8 + 0.2 * var(--flick)));
  transform: scale(calc(0.95 + 0.05 * var(--flick)));
}
.torch-glow-core { width: 260px; height: 260px; margin: -130px 0 0 -130px; top: 60px; background: radial-gradient(circle, rgba(255, 210, 120, .55) 0%, rgba(255, 150, 60, .25) 40%, transparent 70%); opacity: calc(var(--lit) * (0.7 + 0.3 * var(--flick))); }

/* Wall mount: a riveted iron plate screwed to the planks, casting a shadow on them */
.torch-mount {
  position: absolute; left: 50%; bottom: 8px; width: 44px; height: 96px; margin-left: -22px; border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%, rgba(0,0,0,.35)),
    linear-gradient(90deg, #262629 0%, #45454c 22%, #2b2b30 50%, #4a4a52 78%, #1f1f23 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.6), 0 3px 5px rgba(0,0,0,.6), 6px 14px 22px rgba(0,0,0,.55), 0 0 26px rgba(255,140,50,calc(.25 * var(--lit)));
}
.torch-mount::before { content: ""; position: absolute; inset: 6px; border-radius: 4px; border: 1px solid rgba(0,0,0,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.torch-mount b {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a8a92, #3a3a40 55%, #141417);
  box-shadow: 0 1px 2px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.4);
}
.torch-mount b:nth-child(1) { left: 6px; top: 6px; } .torch-mount b:nth-child(2) { right: 6px; top: 6px; }
.torch-mount b:nth-child(3) { left: 6px; bottom: 6px; } .torch-mount b:nth-child(4) { right: 6px; bottom: 6px; }
/* the plate's shadow on the wood, offset away from the flame */
.torch-mount::after { content: ""; position: absolute; left: -12px; right: -12px; top: -10px; bottom: -14px; z-index: -1; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.55), transparent 70%); filter: blur(6px); }
.torch-clamp {
  position: absolute; left: -9px; right: -9px; bottom: 34px; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg, #5a5a62, #26262b 60%, #17171b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(0,0,0,.7);
}
.torch-clamp::before, .torch-clamp::after { content: ""; position: absolute; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9a9aa2, #2c2c32 60%); }
.torch-clamp::before { left: 2px; } .torch-clamp::after { right: 2px; }

/* Iron bracket with a wooden handle */
.torch-bracket {
  position: absolute; left: 50%; bottom: 0; width: 14px; height: 172px; margin-left: -7px; border-radius: 7px 7px 4px 4px;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, #1b1109 0%, #4a2f18 38%, #7a4f2a 52%, #3a2412 70%, #17100a 100%);
  box-shadow: 3px 4px 8px rgba(0,0,0,.65), inset 1px 0 0 rgba(255,220,160,.12);
}
.torch-bracket::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 22px; height: 12px; margin-left: -11px; border-radius: 3px; background: linear-gradient(180deg, #5a5a62, #1a1a1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(0,0,0,.7); }
.torch-ring {
  position: absolute; left: 50%; top: -8px; width: 46px; height: 30px; margin-left: -23px; border-radius: 8px 8px 16px 16px;
  background: linear-gradient(180deg, #55555e 0%, #2a2a31 30%, #15151a 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.7), 0 0 18px rgba(255,140,50,calc(.35 * var(--lit)));
}
.torch-ring::before { content: ""; position: absolute; left: 4px; right: 4px; top: 6px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,200,120,calc(.7 * var(--lit))), transparent); }
.torch-ring::after { content: ""; position: absolute; left: 8px; right: 8px; top: -6px; height: 10px; border-radius: 50%; background: radial-gradient(ellipse at 50% 100%, rgba(255,120,30,calc(.8 * var(--lit))), rgba(120,30,0,calc(.6 * var(--lit))) 60%, transparent 100%); }

/* Flame: stacked gradient blobs that breathe upward. The SVG turbulence only
   roughens the edges; the motion itself is vertical, a flame never leans. */
.torch-flame {
  position: absolute; left: 50%; bottom: 186px; width: 64px; height: 150px; margin-left: -32px; pointer-events: none;
  transform-origin: 50% 100%;
  transform: scale(var(--lit), calc(var(--lit) * (0.94 + 0.09 * var(--flick))));
  opacity: var(--lit); filter: url(#fx-flame) brightness(calc(0.9 + 0.15 * var(--flick)));
}
.torch-flame i { position: absolute; display: block; mix-blend-mode: screen; transform-origin: 50% 100%; }
.f-haze { inset: -16% -34% -6%; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 82%, rgba(255,130,40,.5) 0%, rgba(255,80,10,.24) 42%, transparent 72%); filter: blur(10px); animation: fl-haze 1.8s ease-in-out infinite alternate; }
.f-body { inset: 4% 12% 0; border-radius: 48% 48% 46% 46% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 92%, #fff4c8 0%, #ffc542 16%, #ff8f1f 40%, #ff4f0a 62%, rgba(255,60,10,0) 78%); filter: blur(.7px); animation: fl-body 1.15s ease-in-out infinite alternate; }
.f-inner { inset: 24% 24% 0; border-radius: 48% 48% 50% 50% / 72% 72% 28% 28%; background: radial-gradient(ellipse at 50% 92%, #fff 0%, #fff2b8 30%, rgba(255,190,60,.7) 58%, transparent 76%); animation: fl-inner .85s ease-in-out infinite alternate; animation-delay: -.3s; }
.f-core { inset: 60% 36% 2%; border-radius: 50% 50% 50% 50% / 72% 72% 28% 28%; background: radial-gradient(ellipse at 50% 92%, #ffffff 0%, #dff4ff 28%, rgba(120,170,255,.55) 60%, transparent 78%); animation: fl-core .6s ease-in-out infinite alternate; }
.f-tongue { left: 38%; bottom: 58%; width: 24%; height: 38%; border-radius: 50% 50% 50% 50% / 72% 72% 28% 28%; background: radial-gradient(ellipse at 50% 90%, #ffd77a 0%, #ff8a1f 45%, transparent 75%); filter: blur(1.2px); animation: fl-tongue 2.1s ease-in infinite; opacity: 0; }
.f-tongue2 { left: 40%; width: 20%; animation-duration: 2.9s; animation-delay: -1.3s; }
@keyframes fl-haze { from { transform: scale(1, 1); } to { transform: scale(1.04, 1.1) translateY(-6px); } }
@keyframes fl-body { from { transform: scale(1, 1); } to { transform: scale(.96, 1.09) translateY(-4px); } }
@keyframes fl-inner { from { transform: scale(1, 1) translateX(-1px); } to { transform: scale(.94, 1.12) translateX(1px) translateY(-3px); } }
@keyframes fl-core { from { transform: scaleY(1); } to { transform: scale(1.04, 1.2) translateY(-3px); } }
@keyframes fl-tongue { 0% { opacity: 0; transform: translateY(0) scale(.85); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-64px) scale(.3); } }

/* Embers drifting up from the flame */
.torch-embers { position: absolute; left: 50%; bottom: 220px; width: 2px; height: 2px; pointer-events: none; opacity: var(--lit); }
.torch-embers b { position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle, #fff5c8 0%, #ffb34a 40%, rgba(255,120,30,0) 80%); box-shadow: 0 0 6px 1px rgba(255,150,50,.6); opacity: 0; animation: ember 3.6s ease-out infinite; }
.torch-embers b:nth-child(1) { animation-delay: 0s; --ex: 18px; }
.torch-embers b:nth-child(2) { animation-delay: .7s; --ex: -22px; animation-duration: 4.2s; width: 3px; height: 3px; }
.torch-embers b:nth-child(3) { animation-delay: 1.3s; --ex: 8px; animation-duration: 3.1s; }
.torch-embers b:nth-child(4) { animation-delay: 1.9s; --ex: -10px; animation-duration: 4.8s; width: 3px; height: 3px; }
.torch-embers b:nth-child(5) { animation-delay: 2.5s; --ex: 26px; animation-duration: 3.9s; }
.torch-embers b:nth-child(6) { animation-delay: 3.1s; --ex: -30px; animation-duration: 4.5s; width: 2px; height: 2px; }
.torch-embers b:nth-child(7) { animation-delay: 3.6s; --ex: 2px; animation-duration: 5.2s; width: 3px; height: 3px; }
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  8% { opacity: 1; }
  60% { opacity: .8; transform: translate(calc(var(--ex) * .6), -110px) scale(.8); }
  100% { opacity: 0; transform: translate(var(--ex), -220px) scale(.3); }
}
.torch-smoke { position: absolute; left: 50%; bottom: 200px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: radial-gradient(circle, var(--smoke) 0%, transparent 70%); opacity: 0; pointer-events: none; filter: blur(5px); }
.torch.smoking .torch-smoke { animation: smoke 2.8s ease-out forwards; }
.torch.smoking .torch-smoke::before, .torch.smoking .torch-smoke::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: smoke 2.4s ease-out forwards; }
.torch.smoking .torch-smoke::before { animation-delay: .35s; left: -12px; } .torch.smoking .torch-smoke::after { animation-delay: .7s; left: 12px; }
@keyframes smoke { 0% { opacity: .65; transform: translate(0, 0) scale(.6); } 40% { opacity: .4; } 100% { opacity: 0; transform: translate(14px, -190px) scale(3.4); } }

/* Comfort: static scene when effects are off or motion is reduced. */
html[data-effects="off"] .torch-flame i, html[data-effects="off"] .torch-embers b, html[data-effects="off"] .torch-smoke { animation: none !important; }
html[data-effects="off"] .torch-flame { filter: blur(.6px); }
html[data-effects="off"] .torch { --flick: 1; }
html[data-effects="off"] .room-scene, html[data-effects="off"] .rain-canvas, html[data-effects="off"] .torch { transform: none; }
html[data-effects="off"] .cursor-glow, html[data-effects="off"] .room-flash { display: none; }
@media (prefers-reduced-motion: reduce) {
  .torch-flame i, .torch-embers b, .torch-smoke { animation: none !important; }
  .room-scene, .rain-canvas, .torch { transition: none; }
}

/* Small screens: torches shrink into the corners. */
@media (max-width: 1100px) {
  .torch { --torch-scale: .6; transform-origin: 50% 100%; top: auto; bottom: 6vh; margin-top: 0; }
  .torch-left { left: calc(2.5vw - 60px); } .torch-right { right: calc(2.5vw - 60px); }
  .torch-glow { width: 560px; height: 560px; margin: -280px 0 0 -280px; }
}
@media (max-width: 760px) {
  .torch { --torch-scale: .34; z-index: 5; top: -22px; bottom: auto; margin-top: 0; transform-origin: 50% 0; pointer-events: none; }
  .torch-left { left: -40px; } .torch-right { right: -40px; }
}