/* 21st.dev reference adaptations: Tiger Tear Reveal, Lamp, The Infinite Grid. */
.tear-section { --tear-open:0; --tear-reveal:0; --tear-progress:0; --tear-clear:0; background:#07111a; }
.tear-stage, .reveal-underlay { background:#07111a; }
#tear-art { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.tear-svg { width:100%; height:100%; max-width:none; display:block; }
.tear-section .scroll-hint { opacity:calc(1 - var(--tear-progress) * 7); pointer-events:none; }
.tear-section .reveal-copy { opacity:var(--tear-reveal); }
.lamp-section, #lamp-section {
  --lamp-progress:0; --lamp-background:#07111a; --lamp-line-width:18%;
  --lamp-beam-width:9%; --lamp-light:0; --lamp-sweep:-14%; --lamp-sweep-opacity:0;
  height:260svh; min-height:0; padding:0; overflow:clip; background:var(--lamp-background);
}
.lamp-stage { position:sticky; top:0; height:100svh; min-height:620px; overflow:hidden; background:var(--lamp-background); }
.lamp-stage .lamp-layout { height:100%; margin-top:0; padding-top:clamp(100px,18svh,170px); padding-bottom:36px; }
.lamp-stage .lamp-device { height:clamp(350px,66svh,580px); }
.lamp-rig {
  --lamp-level:clamp(72px,12svh,115px);
  position:absolute; top:0; left:50%; right:auto; bottom:auto;
  width:min(1440px,100%); height:clamp(220px,37svh,350px); margin:0;
  transform:translateX(-50%); pointer-events:none; overflow:visible; z-index:1;
}
.lamp-beam { position:absolute; top:var(--lamp-level); width:var(--lamp-beam-width); max-width:620px; height:clamp(190px,30svh,280px); opacity:calc(.12 + var(--lamp-light) * .56); }
.lamp-beam.left { right:50%; background:conic-gradient(from 70deg at center top, #24c4d5, transparent, transparent); }
.lamp-beam.right { left:50%; background:conic-gradient(from 290deg at center top, transparent, transparent, #24c4d5); }
.lamp-beam::before { content:""; position:absolute; inset:28% 0 0; background:var(--lamp-background); mask-image:linear-gradient(to top,white 3%,transparent); }
.lamp-beam::after { content:""; position:absolute; inset:0 auto 0 0; width:33%; background:var(--lamp-background); mask-image:linear-gradient(to right,white,transparent); }
.lamp-beam.right::after { left:auto; right:0; mask-image:linear-gradient(to left,white,transparent); }
/* A narrow overhead source, not a halo around the model. */
.lamp-halo { position:absolute; left:50%; top:var(--lamp-level); width:var(--lamp-line-width); max-width:1110px; height:24px; transform:translate(-50%,-50%); border-radius:50%; background:#41d1dc; opacity:calc(.1 + var(--lamp-light) * .34); filter:blur(23px); }
.lamp-line { position:absolute; left:50%; top:var(--lamp-level); width:var(--lamp-line-width); max-width:1240px; height:2px; transform:translateX(-50%); background:linear-gradient(90deg,#5db9c000,#83e3e8 12%,#d8fffd 50%,#83e3e8 88%,#5db9c000); opacity:calc(.4 + var(--lamp-light) * .6); box-shadow:0 0 16px #35c9d259; }
.lamp-line::after { content:""; position:absolute; top:-2px; left:var(--lamp-sweep); width:15%; height:6px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,#eaffff,transparent); opacity:var(--lamp-sweep-opacity); filter:blur(1px); }
.lamp-rig::before { content:""; position:absolute; inset:0 0 auto; height:var(--lamp-level); background:var(--lamp-background); z-index:1; }
.lamp-rig::after { content:""; position:absolute; inset:65% 0 -25%; background:linear-gradient(transparent,var(--lamp-background) 78%); }
.infinite-grid { position:absolute; inset:0; overflow:hidden; pointer-events:none; --grid-pointer-x:50%; --grid-pointer-y:35%; }
.infinite-grid-base, .infinite-grid-active { position:absolute; inset:0; background-image:linear-gradient(to right,#a8b5c0 1px,transparent 1px),linear-gradient(to bottom,#a8b5c0 1px,transparent 1px); background-size:40px 40px; background-position:0 0; animation:gk-infinite-grid 1.34s linear infinite; animation-play-state:paused; }
.infinite-grid-base { opacity:.065; }
.infinite-grid-active { opacity:.34; mask-image:radial-gradient(300px circle at var(--grid-pointer-x) var(--grid-pointer-y),black,transparent); transition:opacity .35s; }
.infinite-grid[data-pointer="outside"] .infinite-grid-active { opacity:0; }
.infinite-grid[data-running="true"] .infinite-grid-base, .infinite-grid[data-running="true"] .infinite-grid-active { animation-play-state:running; }
.infinite-grid-colour { position:absolute; inset:0; background:radial-gradient(ellipse at 110% 5%,#cf6c2321,transparent 38%),radial-gradient(ellipse at 0% 100%,#285ca329,transparent 40%); }
@keyframes gk-infinite-grid { to { background-position:40px 40px; } }
@media(max-width:700px) {
  .lamp-section, #lamp-section { height:280svh; }
  .lamp-stage { min-height:680px; }
  .lamp-stage .lamp-layout { display:flex; flex-direction:column-reverse; justify-content:center; gap:14px; padding-top:100px; padding-bottom:30px; }
  .lamp-stage .lamp-device { width:100%; height:clamp(260px,38svh,340px); flex-shrink:0; }
  .lamp-stage .lamp-copy { width:100%; padding:0; text-align:center; }
  .lamp-stage .lamp-copy h2 { text-align:center; font-size:clamp(33px,5.8svh,43px); margin-bottom:14px; }
  .lamp-stage .lamp-copy > p { font-size:13px; line-height:1.9; margin-inline:auto; }
  .lamp-stage .lamp-details { justify-content:center; margin:17px 0 20px; font-size:11px; }
  .lamp-stage .lamp-copy .hair-button { font-size:12px; }
  .lamp-rig { --lamp-level:72px; height:235px; }
  .lamp-beam { height:190px; }
  .lamp-halo { height:18px; filter:blur(17px); }
}
/* Taller flow layout keeps all controls reachable on short/landscape screens. */
@media(max-height:620px), (max-width:700px) and (max-height:700px) {
  .lamp-section, #lamp-section { height:auto; }
  .lamp-stage { position:relative; height:auto; min-height:0; overflow:hidden; }
  .lamp-stage .lamp-layout { height:auto; padding-top:115px; padding-bottom:55px; }
  .lamp-stage .lamp-device { height:320px; }
}
@media(max-width:700px) and (max-height:700px) {
  .lamp-stage .lamp-device { height:275px; }
}
@media(prefers-reduced-motion:reduce) {
  .infinite-grid-base, .infinite-grid-active { animation:none; }
  .infinite-grid-active { transition:none; }
}