/* The Knock: the Week 02 look (Hoang's demo of 2/11/2026), for the seven Week 02 pages only (public/weekly-challenge/w02/).
   Loaded AFTER styles.css, so it may build on its variables. Week 01 pages never load this file.
   Ported from the demo's horror-hero.css, horror-motion.css and horror-ui.css plus the framed-surface block of its styles.css.
   TEXT, numbers, dates and prizes are NOT in this file: every sentence on the pages stays the live Week 02 copy.
   Every animation here stops under `prefers-reduced-motion: reduce` and under the page's own Motion toggle (`body.motion-paused`). */

/* ---------- 1. Landing hero: the door, the lamp, the shade (hero is `.hero.knock-hero`) ---------- */
.hero.knock-hero{background:#070707}
.hero.knock-hero:before,.hero.knock-hero:after{display:none}
.knock-art,.knock-shade,.knock-grain{position:absolute;inset:0;pointer-events:none}
.knock-art{background:url('/weekly-challenge/assets/the-knock-hero-1920x823.webp') center top/cover no-repeat;transform:scale(1.02);will-change:transform;transition:transform .6s ease-out}
.knock-shade{background:linear-gradient(90deg,#070607f2 0%,#090708c4 28%,#0806073a 55%,transparent 75%),linear-gradient(0deg,#090809 0%,transparent 24%),radial-gradient(ellipse at 62% 40%,transparent 35%,#0a030740 100%)}
.knock-grain{opacity:.05;background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#fff 4px,transparent 5px);mix-blend-mode:soft-light}
.hero.knock-hero h1{font-size:clamp(76px,9vw,144px);line-height:.82;letter-spacing:-.075em;margin:0;font-weight:700;max-width:none;text-shadow:0 3px 32px #000}
.hero.knock-hero h1 em{font-style:normal;padding-right:0;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ff809c;font-weight:700;text-shadow:2px 3px 0 #52101d,0 0 35px #dd1e4d38;display:inline-block;animation:knock-glitch 9s infinite}
.knock-subtitle{font-size:clamp(23px,2.4vw,32px);font-weight:600;line-height:1.2;margin:28px 0 0;color:#f2e8e8}
.knock-subtitle+.hero-copy{margin-top:12px}

/* Layers made by knock.js, right after the art, so the shade and the text stay on top. */
.knock-flash,.knock-lamp,.knock-rain-canvas{position:absolute;pointer-events:none}
.knock-lamp{width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,#ffb35a88 0%,#ff8a3c33 30%,transparent 65%);mix-blend-mode:screen;animation:knock-flicker 6s steps(1) infinite}
.knock-flash{inset:0;background:radial-gradient(ellipse at 58% 35%,#ffd9b026,transparent 60%);opacity:0}
.knock-rain-canvas{inset:0;mix-blend-mode:screen}

/* Three knocks: three small jolts, every few seconds while the hero is on screen. */
.knock-hero.is-knocking .knock-art,.knock-hero.is-knocking .knock-rain-canvas{animation:knock-hit .9s ease-out}
.knock-hero.is-knocking .knock-flash{animation:knock-pulse .9s ease-out}
.knock-hero.is-knocking .knock-subtitle{animation:knock-text .9s ease-out}

@keyframes knock-flicker{0%,100%{opacity:.95}7%{opacity:.35}8%{opacity:.9}41%{opacity:.85}42%{opacity:.2}44%{opacity:.8}71%{opacity:1}73%{opacity:.5}74%{opacity:.95}}
@keyframes knock-hit{0%,100%{transform:translate(0,0) scale(1.02)}6%{transform:translate(-3px,1px) scale(1.022)}12%{transform:translate(0,0) scale(1.02)}36%{transform:translate(-3px,1px) scale(1.022)}42%{transform:translate(0,0) scale(1.02)}66%{transform:translate(-4px,1px) scale(1.024)}74%{transform:translate(0,0) scale(1.02)}}
@keyframes knock-pulse{0%,100%{opacity:0}6%,36%,66%{opacity:1}12%,42%,74%{opacity:0}}
@keyframes knock-text{0%,100%{opacity:1}66%{opacity:.55}74%{opacity:1}}
@keyframes knock-glitch{0%,93%,100%{transform:none;opacity:1}94%{transform:translateX(3px) skewX(-6deg);opacity:.75}95%{transform:translateX(-2px);opacity:1}96%{transform:translateX(2px) skewX(4deg);opacity:.6}97%{transform:none;opacity:1}}

@media(max-width:800px){
  /* The phone hero is tall (countdown below the buttons). The picture keeps its own height, like the demo's 720 px hero, and fades into the dark below: stretching it over the whole hero zooms the face to a blur. */
  .knock-art,.knock-shade{bottom:auto;height:min(100%,760px)}
  .knock-art{background-image:url('/weekly-challenge/assets/the-knock-hero-960x412.webp');background-position:62% top;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
  .knock-shade{background:linear-gradient(90deg,#070607e6,#08060760),linear-gradient(0deg,#090809,transparent 35%)}
  .knock-lamp{width:160px;height:160px;margin:-80px 0 0 -80px}
  .hero.knock-hero h1{font-size:clamp(70px,16vw,110px)}
}

/* ---------- 2. The prize cup: one door-knocker trophy, three metals ---------- */
.prize-card .trophy-display img{object-fit:contain;mix-blend-mode:screen}
#rewards .prize-card.second .trophy-display img,
#rewards .prize-card.second:hover .trophy-display img{filter:grayscale(1) brightness(1.15) drop-shadow(0 14px 12px #0009)}
#rewards .prize-card.third .trophy-display img,
#rewards .prize-card.third:hover .trophy-display img{filter:grayscale(1) sepia(1) saturate(1.35) hue-rotate(325deg) brightness(.95) drop-shadow(0 14px 12px #0009)}

/* ---------- 3. Framed surfaces: a soft Wandura light that follows the pointer (landing) ---------- */
.surface-fx{--fx-color:#f67cb2;isolation:isolate}
.surface-fx:not(.hero-countdown){position:relative}
#rewards .prize-card.surface-fx{--fx-color:var(--medal-color,#f67cb2)}
.surface-glow,.surface-frame{position:absolute;inset:0;display:block;margin:0!important;border-radius:inherit;pointer-events:none!important;z-index:-1;overflow:hidden}
.surface-glow{background:radial-gradient(360px circle at var(--fx-x,var(--mx,85%)) var(--fx-y,var(--my,0%)),color-mix(in srgb,var(--fx-color) 13%,transparent),transparent 72%);opacity:.42;transition:opacity .45s ease}
.surface-glow:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--fx-color) 7%,transparent) 49%,#ffffff05 51%,transparent 65%);background-size:260% 100%;opacity:.7;animation:surface-sheen 9s ease-in-out infinite;animation-play-state:paused;animation-delay:var(--fx-delay,0s)}
.surface-frame{border:1px solid color-mix(in srgb,var(--fx-color) 17%,transparent);opacity:.8;transition:opacity .35s ease}
@supports(mask-composite:exclude){
  .surface-frame{border:0;padding:1px;background:linear-gradient(115deg,transparent 20%,color-mix(in srgb,var(--fx-color) 65%,transparent) 45%,#ffffffb3 50%,color-mix(in srgb,var(--fx-color) 45%,transparent) 55%,transparent 80%);background-size:280% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:surface-edge 7s ease-in-out infinite;animation-play-state:paused;animation-delay:var(--fx-delay,0s)}
}
.surface-in-view>.surface-frame,.surface-in-view>.surface-glow:after{animation-play-state:running}
.surface-fx:focus-within>.surface-frame{opacity:1}
.surface-fx:focus-within>.surface-glow{opacity:.85}
@media(hover:hover) and (pointer:fine){
  .surface-fx:hover>.surface-glow{opacity:1}
  .surface-fx:hover>.surface-frame{opacity:1}
}
@keyframes surface-edge{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
@keyframes surface-sheen{0%,18%{background-position:140% 0;opacity:0}35%{opacity:.7}55%,100%{background-position:-40% 0;opacity:0}}

/* ---------- 4. Every page: a flashlight that follows the pointer (desktop only), breathing buttons, a failing bulb on the labels ---------- */
.knock-torch{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:0;transition:opacity .6s;background:radial-gradient(circle 260px at var(--tx,50%) var(--ty,50%),#ffb46a14,#ff6f9b0a 40%,transparent 70%);mix-blend-mode:screen}
body.torch-on .knock-torch{opacity:1}
.button-primary{animation:ui-pulse 4.5s ease-in-out infinite}
.eyebrow,.prose .step-no{animation:ui-label 11s steps(1) infinite}
@keyframes ui-pulse{0%,100%{box-shadow:0 0 0 0 #ff3d7f00}50%{box-shadow:0 0 26px 2px #ff3d7f55}}
@keyframes ui-label{0%,100%{opacity:1}91%{opacity:1}92%{opacity:.35}93%{opacity:1}94%{opacity:.55}95%{opacity:1}}

/* ---------- 5. The six pages: the week's banner behind the page title, dark, drifting, with a flickering warm light ---------- */
#main{overflow-x:clip} /* the banner is a full-width band inside the centred column: it must never widen the page */
.page-head{position:relative;isolation:isolate;padding-top:96px;padding-bottom:48px}
.page-head::before,.page-head::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;pointer-events:none}
.page-head::before{background:#070607 url('/weekly-challenge/assets/the-knock-banner-1672.webp') 70% 35%/cover no-repeat;opacity:.55;filter:saturate(1.1);animation:ui-drift 26s ease-in-out infinite alternate}
.page-head::after{background:linear-gradient(90deg,#070607 0%,#070607e6 35%,#07060766 70%,#07060799 100%),linear-gradient(0deg,#090809 0%,transparent 55%),radial-gradient(circle at 78% 30%,#ffa45a26,transparent 40%);animation:ui-flicker 7s steps(1) infinite}
.page-head h1{opacity:0;transform:translateY(18px);animation:ui-rise 1s .1s cubic-bezier(.2,.7,.2,1) forwards}
.page-head .eyebrow{opacity:0;animation:ui-rise .8s forwards}
.page-head .page-lead,.page-head .page-meta{opacity:0;animation:ui-rise .9s .25s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ui-drift{from{transform:scale(1.04) translate(-1%,0)}to{transform:scale(1.1) translate(1%,-1%)}}
@keyframes ui-flicker{0%,100%{opacity:1}31%{opacity:.88}32%{opacity:1}63%{opacity:.8}64%{opacity:.97}65%{opacity:.86}66%{opacity:1}}
@keyframes ui-rise{to{opacity:1;transform:none}}
@media(max-width:800px){.page-head{padding-top:72px;padding-bottom:34px}.page-head::before{background-position:60% 30%}}

/* Scroll reveal (knock.js adds .ui-reveal, then .ui-in when the block is on screen) and hover life. Without JavaScript nothing is hidden. */
.ui-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.ui-reveal.ui-in{opacity:1;transform:none}
.prose .step,.prose details,.prose tbody tr{transition:background .35s,border-color .35s,transform .35s,box-shadow .35s}
.prose tbody tr:hover{background:#ff4d8a0d}
.prose details:hover summary{color:#ffb8c8}
.prose details[open]{background:linear-gradient(90deg,#ff4d8a0a,transparent 70%)}

/* ---------- 6. Off switches ---------- */
body.motion-paused .knock-art,body.motion-paused .knock-rain-canvas{animation:none}
body.motion-paused .knock-lamp,body.motion-paused .hero.knock-hero h1 em,body.motion-paused .page-head::before,body.motion-paused .page-head::after,body.motion-paused .button-primary,body.motion-paused .eyebrow,body.motion-paused .prose .step-no{animation:none}
body.motion-paused .knock-torch{display:none}
body.motion-paused .page-head h1,body.motion-paused .page-head .eyebrow,body.motion-paused .page-head .page-lead,body.motion-paused .page-head .page-meta{animation:none;opacity:1;transform:none}
body.motion-paused .ui-reveal{opacity:1;transform:none;transition:none}
body.motion-paused .surface-frame,body.motion-paused .surface-glow,body.motion-paused .surface-glow:after{animation:none!important;transition:none!important}
body.motion-paused .surface-glow{opacity:.35;background:radial-gradient(360px circle at 85% 0,color-mix(in srgb,var(--fx-color) 9%,transparent),transparent 72%)}
body.motion-paused .surface-glow:after{display:none}
@media(prefers-reduced-motion:reduce){
  .knock-art,.knock-lamp,.knock-rain-canvas,.hero.knock-hero h1 em,.knock-hero.is-knocking .knock-art,.knock-hero.is-knocking .knock-rain-canvas,.knock-hero.is-knocking .knock-flash,.knock-hero.is-knocking .knock-subtitle{animation:none;transition:none}
  .knock-rain-canvas{display:none}
  .page-head::before,.page-head::after,.button-primary,.eyebrow,.prose .step-no{animation:none}
  .page-head h1,.page-head .eyebrow,.page-head .page-lead,.page-head .page-meta{animation:none;opacity:1;transform:none}
  .ui-reveal{opacity:1;transform:none;transition:none}
  .knock-torch{display:none}
  .surface-fx,.surface-frame,.surface-glow,.surface-glow:after{animation:none!important;transition:none!important;translate:none!important}
  .surface-glow{background:radial-gradient(360px circle at 85% 0,color-mix(in srgb,var(--fx-color) 9%,transparent),transparent 72%)}
  .surface-glow:after{display:none}
}