/* SC-ENZ homepage hero: the light world (hero-light.css 1.0.1, 2026-09-30; 1.0.0 2026-09-28; prototype in prototypes/hero-light/)
   One continuous light world replaces the three-scene reel: a lamp strikes, a follow spot writes
   the headline, then patrols the three entries (and follows the pointer on desktop).
   Loaded after site.css and refinements.css; everything is scoped to .hero--light. */

.hero--light {
  --hl-lit: #f4efe7;
  --hl-dim: rgb(164, 156, 148);
  --hl-lit-accent: #f5b08b;
  --hl-dim-accent: rgb(168, 130, 108);
  background: #10110f;
}

/* the pointer glow from site.js would double the follow spot */
.hero--light::after { display: none; }

.hl-world {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* headline: each line is painted by its own gradient, lit up to --p (px from the line's left edge).
   Without the script the default --p keeps both lines fully lit. */
.hero--light h1 .hl-line {
  --p: 4000px;
  display: inline-block;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, var(--lit) 0, var(--lit) var(--p), var(--dim) calc(var(--p) + 180px));
}

.hero--light h1 .hl-l1 { --lit: var(--hl-lit); --dim: var(--hl-dim); }
.hero--light h1 .hl-l2 { --lit: var(--hl-lit-accent); --dim: var(--hl-dim-accent); }

/* headline size for 「讓美好故事實現，／創造深刻體驗。」 (1.0.1): each sentence stays on one line at every width.
   The longest sentence is 8 glyphs, about 8.06em. The sizes come from measuring the column at 320-2560 px:
   desktop stays under the h1 max-width (1020 px) and clear of the entries column on laptops,
   641 px tablets and 320 px phones keep both sentences inside the column. These rules override site.css. */
.hero--light h1 .hl-line { white-space: nowrap; }
.hero--light h1 { font-size: clamp(3.9rem, 6.5vw, 7.8rem); }
@media (max-width: 920px) {
  .hero--light h1 { font-size: clamp(4rem, 9.2vw, 6.6rem); }
}
@media (max-width: 640px) {
  .hero--light h1 { font-size: clamp(2.05rem, 10.6vw, 4.2rem); }
}

/* the entrance: the page's rise animation waits for the lamp, the copy follows the headline
   (set on the hero itself, not on a class added by script, so the first paint never flashes) */
.hero--light .hero-content .eyebrow { animation-delay: 0.8s; }
.hero--light .hero-content h1 { animation-delay: 0.9s; }
.hero--light .hero-content .hero-lede { animation-delay: 3.3s; }
.hero--light .hero-content .hero-actions { animation-delay: 3.5s; }

/* three entries on the stage */
.hl-entries {
  position: absolute;
  z-index: 2;
  right: var(--side);
  bottom: 22%;
  display: flex;
  gap: clamp(1.4rem, 3.2vw, 3.6rem);
}

.hl-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: clamp(7.5rem, 9vw, 9.5rem);
  color: var(--light);
  text-decoration: none;
}

/* with scripts on, the entries wait for the end of the entrance; without scripts they are simply there */
.hl-js .hero--light:not(.hl-static) .hl-entry { opacity: 0; transform: translateY(14px); }
.hl-js .hero--light.hl-entries-in .hl-entry {
  opacity: 1;
  transform: none;
  /* only the arrival is animated, so nothing fades out while the page loads */
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.hl-entries-in .hl-entry:nth-child(2) { transition-delay: 120ms; }
.hl-entries-in .hl-entry:nth-child(3) { transition-delay: 240ms; }

.hl-entry svg {
  width: clamp(3.4rem, 4.2vw, 4.4rem);
  height: auto;
  margin-bottom: 0.4rem;
  overflow: visible;
}

.hl-entry svg * {
  fill: none;
  stroke: rgba(247, 243, 235, 0.62);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 450ms ease;
}

.hl-entry svg { transition: filter 450ms ease, transform 450ms ease; }

.hl-entry-zh {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(247, 243, 235, 0.8);
  transition: color 450ms ease;
}

.hl-entry-en {
  font-family: var(--font-latin);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(247, 243, 235, 0.5);
  transition: color 450ms ease;
}

.hl-entry.is-lit svg { filter: drop-shadow(0 0 10px rgba(245, 176, 139, 0.65)); transform: translateY(-3px); }
.hl-entry.is-lit svg * { stroke: #f5b08b; }
.hl-entry.is-lit .hl-entry-zh { color: #f7f3eb; }
.hl-entry.is-lit .hl-entry-en { color: #f5b08b; }

.hl-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* paused from the hero button: nothing may wait at zero opacity */
.motion-paused .hero--light .hero-content > * { animation: none !important; opacity: 1 !important; transform: none !important; }
.hl-js .motion-paused .hero--light .hl-entry,
.motion-paused .hero--light .hl-entry { opacity: 1; transform: none; transition: none; }

/* no WebGL: a still frame of the lit stage */
.hl-static .hl-world { display: none; }
.hl-static {
  background:
    radial-gradient(ellipse 30% 22% at 28% 52%, rgba(245, 176, 139, 0.16), transparent 70%),
    linear-gradient(203deg, transparent 38%, rgba(245, 190, 150, 0.07) 46%, transparent 56%),
    radial-gradient(circle at 92% 12%, rgba(255, 214, 180, 0.9) 0, rgba(228, 119, 84, 0.35) 1.2%, transparent 7%),
    #10110f;
}
.hl-static .hl-entry { opacity: 1; transform: none; }

/* laptops: the lede reaches past the middle, so the entries stand in a column on the right */
@media (min-width: 921px) and (max-width: 1279px) {
  .hl-entries { top: 50%; bottom: auto; flex-direction: column; gap: 1.8rem; transform: translateY(-42%); }
  .hl-entry { width: 8.5rem; }
}

/* tablets: a row at the lower left, with room kept free under the copy */
@media (min-width: 641px) and (max-width: 920px) {
  .hero--light .hero-content { padding-bottom: 15rem; }
  .hl-entries { right: auto; left: var(--side); bottom: 6.2rem; gap: 2rem; }
  .hl-entry { width: 7rem; }
}

@media (max-width: 640px) {
  /* bottom: auto and align-items keep the three links their own height; before 1.0.1 they stretched
     down to bottom: 22% and covered the headline, so a tap on the headline opened #domain-film */
  .hl-entries {
    top: 6.6rem;
    right: auto;
    bottom: auto;
    left: var(--side);
    align-items: flex-start;
    gap: 1.1rem;
  }
  .hl-entry { width: auto; min-width: 4.8rem; gap: 0.35rem; }
  .hl-entry svg { width: 2.6rem; margin-bottom: 0.2rem; }
  .hl-entry-zh { font-size: 0.82rem; }
  .hl-entry-en { display: none; }
}