/* ═══════════════════════════════════════════════════════════
   A Light on the Coast — lighthouse landing page
   Layers (back → front): sky · stars · moon · sea · mist ·
   lighthouse · beams · vignette · content · chrome
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #f3e7d3;
  --ink-dim: rgba(243, 231, 211, 0.78);
  --gold: #ffc97e;
  --gold-bright: #ffe0ae;
  --gold-glow: rgba(255, 201, 126, 0.55);
  --scrim: rgba(7, 11, 24, 0.4);
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Songti SC", "Noto Serif SC", SimSun, serif;
  --sans: "Segoe UI", "Helvetica Neue", system-ui, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
}

/* ── theme clock ──
   Registered <color> properties let the whole scene interpolate
   smoothly between "blue hours" (default, dark) and "golden times"
   (sunset, light) when html.golden is toggled. */
@property --sky-1  { syntax: "<color>"; inherits: true; initial-value: #0a0f26; }
@property --sky-2  { syntax: "<color>"; inherits: true; initial-value: #0e1a3c; }
@property --sky-3  { syntax: "<color>"; inherits: true; initial-value: #16294e; }
@property --sky-4  { syntax: "<color>"; inherits: true; initial-value: #1f3d60; }
@property --sky-5  { syntax: "<color>"; inherits: true; initial-value: #2c5670; }
@property --sky-6  { syntax: "<color>"; inherits: true; initial-value: #3d6f7e; }
@property --sky-7  { syntax: "<color>"; inherits: true; initial-value: #4b7f88; }
@property --sea-1  { syntax: "<color>"; inherits: true; initial-value: #2b5a70; }
@property --sea-2  { syntax: "<color>"; inherits: true; initial-value: #1a3f58; }
@property --sea-3  { syntax: "<color>"; inherits: true; initial-value: #0e2438; }
@property --moon-a { syntax: "<color>"; inherits: true; initial-value: #f4f8fc; }
@property --moon-b { syntax: "<color>"; inherits: true; initial-value: #d3dcea; }
@property --moon-c { syntax: "<color>"; inherits: true; initial-value: #b3c2d6; }
@property --halo-1 { syntax: "<color>"; inherits: true; initial-value: rgba(200, 220, 245, 0.24); }
@property --halo-2 { syntax: "<color>"; inherits: true; initial-value: rgba(178, 200, 232, 0.09); }
@property --vign-c { syntax: "<color>"; inherits: true; initial-value: rgba(8, 12, 24, 0.46); }
@property --shim-1 { syntax: "<color>"; inherits: true; initial-value: rgba(226, 238, 250, 0.22); }
@property --shim-2 { syntax: "<color>"; inherits: true; initial-value: rgba(226, 238, 250, 0.06); }
@property --wave-a { syntax: "<color>"; inherits: true; initial-value: rgba(28, 58, 86, 0.72); }
@property --wave-b { syntax: "<color>"; inherits: true; initial-value: rgba(36, 72, 100, 0.55); }
@property --mist-c { syntax: "<color>"; inherits: true; initial-value: rgba(190, 214, 230, 0.09); }
@property --hor-1  { syntax: "<color>"; inherits: true; initial-value: rgba(210, 232, 246, 0.30); }
@property --hor-2  { syntax: "<color>"; inherits: true; initial-value: rgba(210, 232, 246, 0.18); }
@property --ink    { syntax: "<color>"; inherits: true; initial-value: #f3e7d3; }
@property --ink-dim { syntax: "<color>"; inherits: true; initial-value: rgba(243, 231, 211, 0.78); }
@property --gold   { syntax: "<color>"; inherits: true; initial-value: #ffc97e; }
@property --gold-bright { syntax: "<color>"; inherits: true; initial-value: #ffe0ae; }
@property --gold-glow { syntax: "<color>"; inherits: true; initial-value: rgba(255, 201, 126, 0.55); }
@property --scrim   { syntax: "<color>"; inherits: true; initial-value: rgba(7, 11, 24, 0.4); }
@property --moon-top { syntax: "<length-percentage>"; inherits: true; initial-value: 10%; }

html {
  transition:
    --sky-1 1.4s ease, --sky-2 1.4s ease, --sky-3 1.4s ease, --sky-4 1.4s ease,
    --sky-5 1.4s ease, --sky-6 1.4s ease, --sky-7 1.4s ease,
    --sea-1 1.4s ease, --sea-2 1.4s ease, --sea-3 1.4s ease,
    --moon-a 1.4s ease, --moon-b 1.4s ease, --moon-c 1.4s ease,
    --halo-1 1.4s ease, --halo-2 1.4s ease, --vign-c 1.4s ease,
    --shim-1 1.4s ease, --shim-2 1.4s ease,
    --wave-a 1.4s ease, --wave-b 1.4s ease, --mist-c 1.4s ease,
    --hor-1 1.4s ease, --hor-2 1.4s ease,
    --ink 1.4s ease, --ink-dim 1.4s ease, --gold 1.4s ease, --gold-bright 1.4s ease,
    --gold-glow 1.4s ease, --scrim 1.4s ease,
    --moon-top 1.4s ease;
}

/* golden times — sunset, the light mode */
html.golden {
  --sky-1: #35406e; --sky-2: #4f4a80; --sky-3: #7a5680; --sky-4: #b06a68;
  --sky-5: #d8895a; --sky-6: #f0a95f; --sky-7: #ffce85;
  --sea-1: #d0905e; --sea-2: #6e4f4e; --sea-3: #232c48;
  --moon-a: #fff8e0; --moon-b: #ffce8a; --moon-c: #ff9448;
  --moon-top: 46%;
  --halo-1: rgba(255, 196, 120, 0.5); --halo-2: rgba(255, 160, 80, 0.18);
  --vign-c: rgba(120, 55, 15, 0.22);
  --shim-1: rgba(255, 224, 160, 0.4); --shim-2: rgba(255, 190, 120, 0.12);
  --wave-a: rgba(122, 74, 64, 0.5); --wave-b: rgba(150, 92, 74, 0.42);
  --mist-c: rgba(255, 205, 150, 0.12);
  --hor-1: rgba(255, 230, 180, 0.5); --hor-2: rgba(255, 220, 170, 0.28);
  --ink: #331f0e; --ink-dim: rgba(62, 37, 15, 0.95);
  --gold: #622a0a; --gold-bright: #7e3a0e;
  --gold-glow: rgba(255, 140, 60, 0.45);
  --scrim: rgba(255, 243, 216, 0.5);
  --stars-o: 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── bilingual toggling (.le = english, .lz = 中文) ── */
html[data-lang="en"] .lz { display: none; }
html[data-lang="zh"] .le { display: none; }

/* CJK typography wants a gentler tracking than latin small-caps */
.kicker .lz, .about-label .lz, .group-label .lz, .cue .lz { letter-spacing: 0.24em; }
h1 .lz, h2 .lz { letter-spacing: 0.05em; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: #05070f;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────── Scene ─────────────── */

.scene {
  position: fixed;
  inset: 0;
  isolation: isolate;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--sky-1) 0%, var(--sky-2) 26%, var(--sky-3) 46%, var(--sky-4) 66%,
    var(--sky-5) 82%, var(--sky-6) 94%, var(--sky-7) 100%);
}

/* the first light of dawn, pooling on the horizon */
.dawn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32%;
  height: 20%;
  background:
    radial-gradient(60% 95% at 22% 100%, rgba(255, 178, 140, 0.11), transparent 72%),
    linear-gradient(180deg,
      transparent, rgba(130, 185, 205, 0.10) 55%, rgba(152, 196, 206, 0.16) 100%);
}

.stars {
  position: absolute;
  inset: 0 0 32% 0;
  overflow: hidden;
  opacity: var(--stars-o, 1);
  transition: opacity 1.4s ease;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: #d6e2fa;
  box-shadow: 0 0 4px 1px rgba(180, 205, 240, 0.26);
  opacity: 0.55;
  animation: twinkle 3s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.1; transform: scale(0.75); }
  to   { opacity: 0.78; transform: scale(1.25); }
}

.moon {
  position: absolute;
  top: var(--moon-top);
  left: 13%;
  width: clamp(54px, 8vmin, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--moon-a), var(--moon-b) 55%, var(--moon-c));
  opacity: 0.95;
}

.moon::after {
  content: "";
  position: absolute;
  inset: -140%;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--halo-1), var(--halo-2) 45%, transparent 70%);
}

.sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background: linear-gradient(180deg, var(--sea-1), var(--sea-2) 42%, var(--sea-3));
  overflow: hidden;
}

.sea::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent,
    var(--hor-1) 30%, var(--hor-2) 72%, transparent);
}

.shimmer {
  position: absolute;
  top: 0;
  left: calc(14% + 1.4vmin);
  width: clamp(40px, 6vmin, 90px);
  height: 100%;
  transform: skewX(-7deg);
  background: linear-gradient(180deg,
    var(--shim-1), var(--shim-2) 55%, transparent);
  filter: blur(6px);
  animation: shimmerPulse 7s ease-in-out infinite;
}

@keyframes shimmerPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  fill: rgba(16, 38, 60, 0.85);
  animation: drift 38s linear infinite;
}

.waves-a path { fill: var(--wave-a); }

.waves-b {
  height: 62%;
  bottom: 4%;
  animation-duration: 24s;
  animation-direction: reverse;
  opacity: 0.75;
}

.waves-b path { fill: var(--wave-b); }

@keyframes drift {
  to { transform: translateX(-50%); }
}

/* thin twilight clouds */
.cloud {
  position: absolute;
  animation: cloudDrift 80s ease-in-out infinite alternate;
}

.cloud-a { top: 15%; left: 6%; width: 30vw; min-width: 260px; }
.cloud-b { top: 25%; right: 8%; width: 38vw; min-width: 300px; animation-delay: -30s; animation-duration: 95s; }
.cloud-c { top: 50%; left: 28%; width: 26vw; min-width: 220px; animation-delay: -55s; animation-duration: 70s; }

.cloud-a path { fill: rgba(168, 196, 228, 0.085); }
.cloud-b path { fill: rgba(150, 185, 220, 0.06); }
.cloud-c path { fill: rgba(255, 196, 158, 0.06); }

html.golden .cloud-a path { fill: rgba(255, 178, 148, 0.15); }
html.golden .cloud-b path { fill: rgba(255, 160, 130, 0.11); }
html.golden .cloud-c path { fill: rgba(255, 214, 160, 0.13); }

@keyframes cloudDrift {
  from { transform: translateX(-1.5vw); }
  to   { transform: translateX(2.5vw); }
}

/* birds and a distant boat, out before sunrise */
.bird {
  position: absolute;
  width: 26px;
  height: 10px;
  animation: birdDrift 28s ease-in-out infinite alternate;
}

.bird-a { top: 36%; left: 33%; }
.bird-b { top: 41%; left: 39%; width: 17px; height: 6.5px; animation-delay: -12s; animation-duration: 34s; }

.bird path { stroke: #2c405e; }
html.golden .bird path { stroke: #54322e; }

@keyframes birdDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(4vw, -1.6vh); }
}

.sailboat {
  position: absolute;
  left: 19%;
  bottom: calc(32% - 7px);
  width: clamp(34px, 3.4vw, 54px);
  transform-origin: 50% 100%;
  animation: bob 7s ease-in-out infinite alternate;
}

.sailboat svg { display: block; width: 100%; height: auto; }

@keyframes bob {
  from { transform: translateY(-1.5px) rotate(-1.2deg); }
  to   { transform: translateY(1.5px) rotate(1.2deg); }
}

/* warm patch of water lit up where the beam lands */
.beam-pool {
  position: absolute;
  top: -6%;
  height: 54%;
  width: min(36vw, 640px);
  transform: translateX(-50%) skewX(-8deg);
  background: radial-gradient(ellipse 52% 58% at 50% 6%,
    rgba(255, 208, 138, 0.30), rgba(255, 208, 138, 0.09) 48%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: left 1.6s cubic-bezier(0.3, 1.1, 0.35, 1), opacity 1.3s ease;
}

.mist {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mist-c), transparent);
  filter: blur(10px);
  animation: mistDrift 30s ease-in-out infinite alternate;
}

.mist-a { width: 46vw; height: 11vh; left: 4vw; bottom: 24vh; }
.mist-b { width: 34vw; height: 9vh; left: 52vw; bottom: 20vh; animation-delay: -14s; }

@keyframes mistDrift {
  from { transform: translateX(-3vw); opacity: 0.65; }
  to   { transform: translateX(4vw); opacity: 1; }
}

/* ─────────────── Lighthouse ─────────────── */

.lighthouse-wrap {
  position: absolute;
  right: 5%;
  bottom: 25%;
  width: clamp(180px, 33vh, 350px);
  aspect-ratio: 200 / 330;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5));
}

.lighthouse {
  display: block;
  width: 100%;
  height: 100%;
}

.win { animation: windowFlicker 8s ease-in-out infinite; }
.win-b { animation-delay: -3.2s; }
.win-hut { animation-delay: -5.6s; }

@keyframes windowFlicker {
  0%, 100% { opacity: 1; }
  42% { opacity: 1; }
  46% { opacity: 0.65; }
  50% { opacity: 0.95; }
  78% { opacity: 0.8; }
  84% { opacity: 1; }
}

.lamp-core { animation: lampBreathe 5s ease-in-out infinite; transform-origin: 100px 70px; }

@keyframes lampBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(0.94); }
}

.lamp-anchor {
  position: absolute;
  left: 50%;
  top: 21.2%;
  width: 0;
  height: 0;
}

.halo {
  position: absolute;
  left: 0;
  top: 0;
  width: 36vmin;
  height: 36vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--halo-1), var(--halo-2) 42%, transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.7s ease;
  animation: haloBreathe 5s ease-in-out infinite;
}

@keyframes haloBreathe {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.68; }
}

body.is-sweeping .halo {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 1;
}

/* ─────────────── Beams ─────────────── */

/* The beam is two conic wedges painted on a viewport-sized layer,
   pivoting on the lamp point. --beam-a (registered below) is the
   conic angle; transitioning it sweeps the light with a little
   lens overshoot, no JavaScript animation loop required. */
@property --beam-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.beam-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  --bx: 80%;
  --by: 30%;
  --beam-a: 0deg;
  background:
    conic-gradient(from calc(var(--beam-a) + 176deg) at var(--bx) var(--by),
      rgba(255, 206, 132, 0) 0deg,
      rgba(255, 206, 132, 0.02) 2deg,
      rgba(255, 206, 132, 0.06) 4.5deg,
      rgba(255, 206, 132, 0.02) 7deg,
      rgba(255, 206, 132, 0) 9deg,
      rgba(255, 206, 132, 0) 348deg),
    conic-gradient(from calc(var(--beam-a) - 11deg) at var(--bx) var(--by),
      rgba(255, 206, 132, 0) 0deg,
      rgba(255, 206, 132, 0.06) 2.5deg,
      rgba(255, 214, 150, 0.15) 5.5deg,
      rgba(255, 220, 160, 0.24) 8.5deg,
      rgba(255, 226, 178, 0.34) 11deg,
      rgba(255, 220, 160, 0.24) 13.5deg,
      rgba(255, 214, 150, 0.15) 16.5deg,
      rgba(255, 206, 132, 0.06) 19.5deg,
      rgba(255, 206, 132, 0) 22deg,
      rgba(255, 206, 132, 0) 348deg);
  mix-blend-mode: screen;
  opacity: 0;
  transition:
    --beam-a 1.5s cubic-bezier(0.3, 1.25, 0.35, 1),
    opacity 1.2s ease,
    filter 1.4s ease;
}

/* the beam all but vanishes over the bright sunset sky — lean on the
   filter so the sweep stays legible in golden times (and crossfades) */
html.golden .beam-layer { filter: brightness(1.8) saturate(1.05); }

.beam-layer.snap { transition: none; }

body.is-ready .beam-layer { opacity: 1; }

/* the light dissolves into the night instead of running off-screen */
.beam-layer {
  -webkit-mask: radial-gradient(circle 170vmax at var(--bx) var(--by),
    #000 18%, rgba(0, 0, 0, 0.5) 52%, transparent 82%);
          mask: radial-gradient(circle 170vmax at var(--bx) var(--by),
    #000 18%, rgba(0, 0, 0, 0.5) 52%, transparent 82%);
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(125% 95% at 46% 42%,
    transparent 52%, var(--vign-c) 100%);
}

/* ─────────────── Content sections ─────────────── */

.content { position: relative; z-index: 10; height: 100%; }

.section {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.section.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.9s ease 0.35s, visibility 0s linear 0.35s;
}

/* Blocks carry a soft pool of scrim light behind their text — as if the
   beam had just raked across them. Painted on the block itself (not a
   pseudo-element) so it stays put while the block's content scrolls;
   the box-shadow halo feathers the box edge into the sky. */
.block {
  position: absolute;
  max-width: min(600px, 52vw);
  max-height: calc(100dvh - var(--block-top, 30%) - 64px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 26px 34px 40px 30px;
  border-radius: 30px;
  background: radial-gradient(ellipse 62% 72% at 50% 48%,
    var(--scrim) 0%, var(--scrim) 58%, transparent 100%);
  box-shadow: 0 0 34px 22px color-mix(in srgb, var(--scrim) 55%, transparent);
}

.block::-webkit-scrollbar { display: none; }

.block:focus-visible {
  outline: 1.5px solid var(--gold-bright);
  outline-offset: 6px;
}

.block > * + * { margin-top: 0.9em; }

.kicker {
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(46px, 6.5vw, 92px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-shadow: 0 0 34px rgba(255, 190, 110, 0.32);
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  text-shadow: 0 0 26px rgba(255, 190, 110, 0.28);
}

.tagline, .lead {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 34em;
}

.section p:not(.kicker):not(.tags):not(.signals):not(.about-label):not(.group-label) {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-dim);
  max-width: 36em;
}

/* staggered "lit by the beam" reveal */
.lit {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.01s linear, transform 0.01s linear;
}

.section.is-active .lit {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s ease calc(0.45s + var(--i, 0) * 0.11s),
    transform 0.9s cubic-bezier(0.2, 0.8, 0.25, 1) calc(0.45s + var(--i, 0) * 0.11s);
}

/* block positions — kept low so the beam rakes down across the scene */
.home-block     { --block-top: 31%; left: 9%;  top: 31%; }
.about-block    { --block-top: 34%; left: 8%;  top: 34%; }
.projects-block { --block-top: 28%; left: 6%;  top: 28%; max-width: min(880px, 62vw); }
.skills-block   { --block-top: 30%; left: 12%; top: 30%; }
.contact-block  { --block-top: 38%; left: 9%;  top: 38%; }

/* home scroll cue */
.cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 2.2em;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.cue-arrow {
  display: inline-block;
  color: var(--gold);
  font-size: 15px;
  animation: cueBob 2.2s ease-in-out infinite;
}

@keyframes cueBob {
  0%, 100% { transform: translateY(-2px); opacity: 0.6; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* projects */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 1.4em;
}

.card {
  padding: 22px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 201, 126, 0.22);
  background: linear-gradient(160deg,
    rgba(255, 214, 150, 0.085), rgba(255, 214, 150, 0.025) 70%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.card:hover {
  border-color: rgba(255, 201, 126, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 190, 110, 0.12);
}

.card h3 {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--gold-bright);
  margin-bottom: 0.45em;
}

.card p:not(.tags) {
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.55;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 0.9em;
}

.tags span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 201, 126, 0.28);
  color: rgba(255, 226, 180, 0.92);
}

.card a {
  display: inline-block;
  margin-top: 1em;
  font-size: 13px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 201, 126, 0.35);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.card a:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

/* skills */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5em;
  max-width: 34em;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 201, 126, 0.28);
  background: rgba(255, 201, 126, 0.055);
  font-size: clamp(13px, 1.05vw, 15px);
  color: var(--ink);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.chips li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px var(--gold);
  flex: none;
}

.chips li:hover {
  border-color: rgba(255, 201, 126, 0.6);
  background: rgba(255, 201, 126, 0.12);
}

/* contact */
.flare {
  display: inline-block;
  margin-top: 0.6em;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 40px);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 201, 126, 0.35);
  padding-bottom: 4px;
  text-shadow: 0 0 26px rgba(255, 190, 110, 0.35);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.flare:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

.flare:focus-visible,
.signals a:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 5px;
  border-radius: 3px;
}

.signals {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: clamp(14px, 1.1vw, 16px);
}

.signals a {
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.signals a:hover { color: var(--gold-bright); border-color: rgba(255, 201, 126, 0.5); }

.signals span { color: rgba(255, 201, 126, 0.6); }

/* ─────────────── Decorations ─────────────── */

.sparkle {
  width: 11px;
  height: 11px;
  margin: 0 12px;
  vertical-align: -1px;
}

.sparkle path { fill: var(--gold); }

.wave-divider { display: block; margin-top: 1.4em; opacity: 0.9; }

.wave-divider path { stroke: var(--gold); stroke-opacity: 0.75; }

.bunting {
  display: block;
  width: 150px;
  height: auto;
  margin: 0.3em 0 0.4em;
  opacity: 0.9;
}

/* labelled groups (about + skills) */
.about-group { margin-top: 1.6em; }

.about-label,
.group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}

.icon { width: 17px; height: 17px; flex: none; opacity: 0.95; }

.about-text { margin-top: 0.5em; }

.chip-group { margin-top: 1.5em; }
.chip-group + .chip-group { margin-top: 1.3em; }

.chip-group .chips { margin-top: 0.8em; }

.chip-note {
  font-size: 0.78em;
  opacity: 0.65;
  margin-left: 4px;
}

/* project card glyphs */
.card-glyph {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 201, 126, 0.25);
  background: rgba(255, 201, 126, 0.07);
  margin-bottom: 14px;
}

.card-glyph svg { width: 23px; height: 23px; display: block; }

/* margin constellation next to the toolkit */
.constellation { display: none; }

@media (min-width: 1200px) {
  .skills-block .constellation {
    display: block;
    position: absolute;
    right: 6px;
    top: 74px;
    width: 150px;
    opacity: 0.85;
  }

  .constellation circle {
    animation: twinkle 4.5s ease-in-out infinite alternate;
  }

  .constellation circle:nth-of-type(2n) { animation-delay: -1.6s; }
  .constellation circle:nth-of-type(3n) { animation-delay: -2.9s; }
}

/* ─────────────── Chrome ─────────────── */

.counter {
  position: fixed;
  top: 30px;
  left: 36px;
  z-index: 20;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 226, 182, 0.85);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
  pointer-events: none;
}

.counter.show { opacity: 1; transform: none; }

.dots {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 15px;
}

.dot {
  position: relative;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.dot-light {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 231, 211, 0.72);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.dot:hover .dot-light { border-color: rgba(255, 224, 174, 0.85); transform: scale(1.15); }

.dot.is-active .dot-light {
  background: var(--gold);
  border-color: transparent;
  box-shadow: 0 0 16px 4px var(--gold-glow);
}

.dot:focus-visible { outline: 1.5px solid var(--gold-bright); outline-offset: 3px; border-radius: 50%; }

.dot-label {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 228, 186, 0.95);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.dot:hover .dot-label, .dot:focus-visible .dot-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.credits {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 20;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(243, 231, 211, 0.62);
  pointer-events: none;
}

/* theme toggle — golden times ⇄ blue hours */
.theme-toggle {
  position: fixed;
  top: 26px;
  right: 34px;
  z-index: 30;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: box-shadow 0.4s ease, transform 0.4s ease, background-color 0.4s ease,
              color 1.2s ease, border-color 1.2s ease;
}

.theme-toggle svg { width: 19px; height: 19px; display: none; }
body:not(.golden) .tt-sun { display: block; }
body.golden .tt-moon { display: block; }

.theme-toggle:hover {
  box-shadow: 0 0 16px 2px var(--gold-glow);
  transform: rotate(14deg);
}

.theme-toggle:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; }

/* language pill — EN ⇄ 中文 */
.lang-toggle {
  position: fixed;
  top: 26px;
  right: 84px;
  z-index: 30;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: box-shadow 0.4s ease, background-color 0.4s ease,
              color 1.2s ease, border-color 1.2s ease;
}

.lang-toggle:hover { box-shadow: 0 0 16px 2px var(--gold-glow); }

.lang-toggle:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; }

/* golden times — content colors */
html.golden .moon { left: 63%; }

html.golden h1,
html.golden h2 { text-shadow: 0 2px 22px rgba(150, 80, 20, 0.16); }

html.golden .flare {
  color: #8a3f12;
  border-bottom-color: rgba(122, 58, 16, 0.5);
  text-shadow: 0 2px 20px rgba(200, 110, 40, 0.22);
}

html.golden .flare:hover { color: #6b2f0c; border-bottom-color: #6b2f0c; }

html.golden .card {
  background: linear-gradient(160deg,
    rgba(255, 244, 222, 0.6), rgba(255, 232, 196, 0.28) 70%);
  border-color: rgba(160, 90, 40, 0.4);
  box-shadow: 0 10px 30px rgba(90, 40, 10, 0.16);
}

html.golden .card:hover {
  border-color: rgba(170, 95, 35, 0.7);
  box-shadow: 0 14px 36px rgba(90, 40, 10, 0.2), 0 0 30px rgba(255, 150, 60, 0.14);
}

html.golden .card h3 { color: #7e3a0e; text-shadow: none; }

html.golden .card-glyph {
  border-color: rgba(160, 90, 40, 0.4);
  background: rgba(255, 220, 160, 0.28);
}

html.golden .tags span {
  border-color: rgba(150, 80, 30, 0.4);
  background: rgba(255, 214, 150, 0.18);
  color: rgba(105, 52, 18, 0.95);
}

html.golden .chips li {
  border-color: rgba(150, 80, 30, 0.42);
  background: rgba(255, 216, 150, 0.26);
  color: #4a3016;
}

html.golden .chips li::before {
  background: #b0561e;
  box-shadow: 0 0 9px rgba(220, 120, 40, 0.8);
}

/* the dots, counter and credits live over the sea — which stays dark
   navy in both themes, so they keep light cream values in golden too */
html.golden .dot-light { border-color: rgba(255, 217, 160, 0.65); }
html.golden .dot:hover .dot-light { border-color: rgba(255, 228, 186, 0.95); }
html.golden .dot.is-active .dot-light {
  background: #ffd9a0;
  box-shadow: 0 0 16px 4px rgba(255, 150, 60, 0.6);
}
html.golden .dot:focus-visible { outline-color: #ffd9a0; }
html.golden .dot-label { color: rgba(255, 236, 206, 0.95); }
html.golden .counter { color: rgba(255, 230, 198, 0.85); }
html.golden .credits { color: rgba(255, 236, 210, 0.72); }

html.golden .theme-toggle,
html.golden .lang-toggle { color: #ffd9a0; border-color: rgba(255, 217, 160, 0.75); }

html.golden .theme-toggle:focus-visible,
html.golden .lang-toggle:focus-visible { outline-color: #ffd9a0; }

html.golden .signals a { color: rgba(78, 46, 22, 0.95); }
html.golden .signals a:hover { color: #6b2f0c; border-bottom-color: rgba(107, 47, 12, 0.6); }
html.golden .signals span { color: rgba(140, 75, 30, 0.5); }

/* smooth color changes for themed content pieces */
.tags span, .chips li, .counter, .credits,
.dot-label, .signals a, .card-glyph, .cloud path, .bird path {
  transition: background-color 1.2s ease, border-color 1.2s ease,
              color 1.2s ease, fill 1.2s ease, stroke 1.2s ease;
}

/* ─────────────── Responsive ─────────────── */

/* tablets & small laptops: three cards across would be cramped here */
@media (min-width: 861px) and (max-width: 1199px) {
  .projects-block { left: 5%; max-width: min(760px, 86vw); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .lighthouse-wrap { right: -4%; bottom: 20%; width: clamp(120px, 30vw, 210px); }

  .moon { top: 3.5%; left: 62%; width: 46px; }
  html.golden .moon { top: 62%; }

  .waves { height: 58%; }
  .waves-b { height: 42%; bottom: 5%; }

  .theme-toggle { top: 16px; right: 18px; width: 36px; height: 36px; }
  .theme-toggle svg { width: 17px; height: 17px; }
  .lang-toggle { top: 16px; right: 62px; height: 36px; padding: 0 12px; font-size: 12px; }

  .block { max-width: min(560px, 86vw); max-height: calc(100dvh - var(--block-top, 30%) - 76px); padding: 18px 20px 14px 18px; }
  .home-block     { --block-top: 24%; left: 6%; top: 24%; }
  .about-block    { --block-top: 42%; left: 6%; top: 42%; }
  .projects-block { --block-top: 24%; left: 5%; top: 24%; max-width: 90vw; }
  .skills-block   { --block-top: 38%; left: 6%; top: 38%; }
  .contact-block  { --block-top: 46%; left: 6%; top: 46%; }

  /* cards run single-column with full descriptions; the block scrolls */
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 14px 16px; }
  .card-glyph {
    float: left;
    margin: 0 12px 4px 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .card-glyph svg { width: 19px; height: 19px; }
  .card h3 { margin: 2px 0 0.5em; padding-top: 5px; }
  .tags { margin-top: 0; }

  .cloud { min-width: 200px; }

  .counter { top: 18px; left: 20px; }
  .credits { display: none; }
  .dots { bottom: 16px; gap: 8px; }
  .dot { width: 30px; height: 30px; }
  .dot-light { inset: 10px; }
}

/* short landscape screens (phones sideways) */
@media (max-height: 460px) and (orientation: landscape) {
  .lighthouse-wrap { width: clamp(110px, 34vh, 200px); bottom: 30%; }
  .home-block { top: 18%; }
  .cards { gap: 10px; }
}

/* ─────────────── Reduced motion ─────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}