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

    :root {
      --bg:        #0e0c14;
      --bg-mid:    #13101e;
      --gold:      #a3844e;
      --gold-dim:  #221c10;
      --cream:     #f0e8d5;
      --cream-dim: #9e9080;
	  --white:     #FFF;
      --font-body: "Noto Sans HK", sans-serif;
      --font-deco: "Noto Serif HK", "Cormorant Garamond",serif;
    }

    html { scroll-behavior:auto; font-size:16px; }

    body {
      background:var(--bg);
      color:var(--cream);
      font-family:var(--font-body);
      line-height:1.9;
      overflow-x:hidden;
	  
    }

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform, filter; /* GPU compositing layer */
}


h3 {
	font-weight: 600;
}


    #progress-bar {
      position:fixed; top:0; left:0;
      height:2px; width:0%;
      background:linear-gradient(90deg,var(--gold-dim),var(--gold));
      z-index:9999;
    }

    /* ─── SPIRAL BACKDROP ─── */
    #spiral-backdrop {
	  perspective: 800px;
      perspective-origin: 10% 340%;
      position:fixed; inset:0;
      width:100vw; height:100vh;
      z-index:0; pointer-events:none;
    }

    #spiral-backdrop::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 70% 60% at 50% 50%,
        rgba(201,168,76,.08) 0%,transparent 70%);
      pointer-events:none;
    }

    #spiral-particles { position:absolute; inset:0; pointer-events:none; }

    #spiral-particles span {
      position:absolute; border-radius:50%;
      background:var(--gold); opacity:0;
      animation:twinkle var(--dur,2s) var(--delay,1s) infinite ease-in-out;
    }

    @keyframes twinkle {
      0%,100%{opacity:0;transform:scale(0.8);}
      50%{opacity:.95;transform:scale(1);}
    }

    #spiral-ring {
      position:absolute;
      top:50vh; left:50vw;
      width:0; height:0;
	  transform: rotateX(-135deg);
	  transform: rotateY(-5deg);
      transform-style: preserve-3d;
    }

    .spiral-card {
      position:absolute;
      transform-origin:center center;
      will-change:transform;
    }

    .spiral-card-inner {
      width:100%; height:100%;
      border-radius:3px;
      border:1px solid var(--gold-dim);
      overflow:hidden;
      box-shadow:0 16px 30px rgba(0,0,0,.55);
      position:relative;
    }

    .spiral-card-img {
      position:absolute;
      inset:0;
      width:100%; height:100%;
      object-fit:cover; display:block;
    }

    .spiral-card-pattern {
      width:84%; height:84%;
      border:1px solid rgba(201,168,76,.3);
      border-radius:4px;
      display:flex; align-items:center; justify-content:center;

    }

    .spiral-card-glyph {
      font-family:var(--font-deco);
      font-size:.7rem; color:var(--gold-dim);
      letter-spacing:.1em; text-align:center; line-height:1.8;
    }

    /* ─── SHARED ─── */
    .section-inner { max-width:1100px; margin:0 auto; padding:0 2rem; }

    .section-heading {
	font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: left;
      font-family:var(--font-deco);
      color:var(--gold);
      margin-bottom:2.5rem; line-height:1.3;
    }

    .section-heading span {
      display:block; font-size:.5em; letter-spacing:.25em;
      color:var(--gold-dim); text-transform:uppercase; margin-bottom:.4em;
    }

    .body-text { 
	font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 2;
    color: var(--white);
    margin-bottom: 0rem;
	text-align: justify; }
    .body-text+.body-text { margin-top:1.6rem; }

    .reveal { opacity:0; transform:translateY(36px); }

    .divider { width:60px; height:1px; background:var(--gold-dim); margin:3rem 0; }

    /* ─── HERO ─── */
    #hero { height:220vh; position:relative; z-index:1; }

    .hero-sticky {
      position:sticky; top:0; height:100vh;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; background:transparent;
    }

    .hero-content { position:relative; z-index:2; text-align:center; padding:2rem; }

    .hero-line       { display:block; overflow:hidden; }
    .hero-line-inner { display:block; opacity:0; transform:translateY(40px); }

    /* ── Glitch symbol swap ── */
    .glitch-text {
      display: inline-block;
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }
    .glitch-text.is-symbol {
      text-shadow: 0 0 18px rgba(201,168,76,0.55), 0 0 40px rgba(201,168,76,0.22);
      letter-spacing: 0.12em;
    }

    .hero-eyebrow {
      font-family:var(--font-deco);
      font-size:clamp(.75rem,1.5vw,1rem);
      letter-spacing:.35em; color:var(--gold-dim);
      text-transform:uppercase; margin-bottom:1.5rem;
    }

    .hero-title {
		font-family:var(--font-deco);
		font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.9);
    letter-spacing: 2px;
      color:var(--white);
    }

    .hero-title-zh {
		font-family:var(--font-body);
		font-size: clamp(1.5rem, 2.5vw, 1.5rem);
    font-weight: 400;
    margin-bottom: 0;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.9);
    opacity: 1;
    }

    .hero-subtitle {
      margin-top:2rem;
      font-family:var(--font-deco);
      font-size:clamp(.85rem,1.8vw,1.1rem);
      color:var(--cream-dim); letter-spacing:.15em; font-style:italic;
    }

    .hero-scroll-hint {
      position:absolute; bottom:4.5rem; left:50%;
      transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:.5rem;
      color:var(--white); font-size: 2rem;
      letter-spacing:.0em; text-transform:uppercase; opacity:0;
	  animation:scrollPulse 2s infinite;
    }

    .scroll-line {
      width:1px; height:40px;
      background:linear-gradient(to bottom,var(--white),transparent);
      animation:scrollPulse 2s infinite;
    }

    @keyframes scrollPulse {
      0%,100%{opacity:.1;} 50%{opacity:1;}
    }

    /* ─── CONTENT 1 ─── */
    #content1 { position:relative; z-index:2; padding:8rem 0 0rem; }

    #content1::before {
      content:''; position:absolute; inset:0; z-index:0;
      
      pointer-events:none;
    }

    #content1 .section-inner { position:relative; z-index:1; }

    /* ─── CONTENT 2 ─── */
    #content2 { position:relative; z-index:2; padding:6rem 0 0rem; }

    #content2::before {
      content:''; position:absolute; inset:0; z-index:0;
      
      pointer-events:none;
    }

    #content2 .section-inner { position:relative; z-index:1; }

    #content1 .body-text,#content2 .body-text,
    #content1 .section-heading,#content2 .section-heading { max-width:100%; }

    /* ─── CONTENT 3 ─── */
    #content3 { position:relative; z-index:2; padding:6rem 0;  }

    .content3-inner { max-width:1100px; margin:0 auto; padding:0 2rem; }

    .layer-wrap { display:flex; align-items:flex-start; gap:4rem; }
    .layer-text-col { flex:1; margin-top:-2rem; }

    .layer-card-col {
      flex-shrink:0; display:flex;
      align-items:center; justify-content:center; width:260px;
    }

    .layer-item { padding:2rem 0; border-top:1px solid rgba(201,168,76,.25); }
    .layer-item:first-child { border-top:none; }

    .layer-number {
      font-family:var(--font-deco); font-size:5rem; font-weight:300;
      color:rgba(201,168,76,.25); line-height:1; margin-bottom:.5rem;
    }

    .layer-label {
      font-family:var(--font-deco); font-size:clamp(1rem,2vw,1.15rem);
      color:var(--gold); margin-bottom:1.0rem; font-weight:600;
	  
    }

    @media (max-width:767px) {
      .layer-wrap { flex-direction:column-reverse; align-items:center; }
      .layer-card-col { width:100%; justify-content:center; margin-bottom:2rem; }
	  .layer-wrap { gap:0rem; }
	  #content3 { padding:4rem 0;  }
	  #content6 { padding:4rem 0;  }
	  
    }

    /* ─── CONTENT 4 ─── */
    #content4 { position:relative; z-index:2; padding:1rem 0 4rem 0;  }

    .content4-inner { max-width:1100px; margin:0 auto; padding:0 2rem; text-align:center; }

    .ornament {
      font-family:var(--font-deco); font-size:2rem;
      color:rgba(201,168,76,.25); letter-spacing:.3em; display:block; margin-bottom:2rem;
    }

    /* ─── CONTENT 5 ─── */
    #content5 { position:relative; z-index:2;  }

    .h-scroll-outer { overflow:hidden; }
    .h-scroll-track { display:flex; width:300vw; will-change:transform; }

    .h-panel {
      width:100vw; height:100vh;
      display:flex; align-items:center; justify-content:left;
      padding:0 0vw; gap:4vw; flex-shrink:0;
	  background-color:rgba(0,0,0,.5);
    }

    .h-panel-photo {
      flex-shrink:0; weight:50%; width:min(50%); height:100%;
      aspect-ratio:1/1; overflow:hidden;
      border-radius:0px; border:0px solid var(--gold-dim);
    }

    .h-panel-photo img {
      width:100%; height:100%; object-fit:cover; display:block;
       transition:filter .6s ease;
    }

    .h-panel:hover .h-panel-photo img { filter:saturate(1) brightness(1); }

    .h-panel-text { flex:1; max-width:600px; padding-right:15px;}

    .h-panel-num {
      font-family:var(--font-deco); font-size:5rem; font-weight:300;
      color:rgba(201,168,76,.25); line-height:1; margin-bottom:1rem;
    }

    .h-panel-title {
      font-family:var(--font-deco); font-size:clamp(1rem,2vw,1.15rem); line-height:1.5rem;
      color:var(--gold); margin-bottom:1.0rem;
	  font-weight:600;
    }
	.h-panel-title2 {
      font-family:var(--font-deco); font-size:clamp(1rem,2vw,1.15rem); line-height:1.5rem;
      color:var(--gold); margin-bottom:1.0rem;
	  padding-left:30px;
	  background-image: url("../images/sep_line.png");
      background-repeat: no-repeat;
	  margin-top: -64px;
	  height: 100px;
	  display: flex;
      flex-direction: column;
	  justify-content: flex-end; 
	  font-weight:600;
	  
    }

    .h-panel-tarot-tag {
      display:inline-block; font-family:var(--font-deco); font-size:clamp(1rem,2vw,1.15rem); color:var(--gold);
      border:1px solid var(--gold); padding:.2rem .7rem;
      border-radius:20px; margin-bottom:1.2rem; font-weight: 600;
    }

    .v-panels { display:none; }

    .v-panel {
      padding:2rem 2rem; border-top:1px solid rgba(201,168,76,.25);
      max-width:600px; margin:0 auto;
    }
	
	.v-panel-title {
      font-family:var(--font-deco); font-size:clamp(0.9rem,1.8vw,1rem); line-height:1.5rem;
      color:var(--gold); margin-bottom:1.0rem;
	  font-weight:600;
    }
	.v-panel-title2 {
      font-family:var(--font-deco); font-size:clamp(0.9rem,1.8vw,1rem); line-height:1.5rem;
      color:var(--gold); margin-bottom:1.0rem;
	  padding-left:30px;
	  background-image: url("../images/sep_line.png");
      background-repeat: no-repeat;
	  margin-top: -64px;
	  height: 100px;
	  display: flex;
      flex-direction: column;
	  justify-content: flex-end; 
	  font-weight:600;
	  
    }
	
	
    .v-panel-photo {
      width:100%; aspect-ratio:1/1; overflow:hidden;
      border-radius:4px; border:0px solid var(--gold-dim); margin-bottom:2rem;
    }

    .v-panel-photo img {
      width:100%; height:100%; object-fit:cover;
      filter:saturate(.85) brightness(.9);
    }

    @media (max-width:767px) {
      .h-scroll-outer { display:none; }
      .v-panels { display:block; }
	  .v-panel-photo {
      width:100%; aspect-ratio:1/.8; }
    }

    /* ─── TAROT CARD COMPONENT ─────────────────
       CRITICAL FIX:
       NO transform:rotateY() in CSS at all.
       All rotation state is owned 100% by GSAP.
       gsap.set() in JS sets the initial rotationY:180
       before any animation runs, so GSAP's cache is
       always the single source of truth.
    ─────────────────────────────────────────── */
    .card-wrap {
      perspective:1000px;
      width:220px; height:375px;
      flex-shrink:0;
    }

    #foolCardWrap {
      transform: rotate(10deg);
    }

    .card-inner {
      width:100%; height:100%;
      position:relative;
      transform-style:preserve-3d;
      /* ← NO transform:rotateY(180deg) here! GSAP sets it. */
    }

    .card-face {
      position:absolute; inset:0;
      border-radius:10px;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
      overflow:hidden;
      border:1px solid var(--gold-dim);
    }

    /* back face: faces the viewer by default (rotationY=0) */
    .card-back {
      /* NO rotateY override — GSAP owns the parent */
    }

    .card-back-pattern {
      width:86%; height:86%;
      border:1px solid var(--gold-dim); border-radius:6px;
      display:flex; align-items:center; justify-content:center;
      background:
        repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(201,168,76,.06) 8px,rgba(201,168,76,.06) 9px),
        repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(201,168,76,.06) 8px,rgba(201,168,76,.06) 9px);
    }

    .card-back-star { font-size:2rem; color:var(--gold-dim); opacity:.7; }

    /* front face: hidden behind (rotationY=180 on parent = front faces away) */
    .card-front-placeholder {
      background:#0e0c14;
      padding:0;
      overflow:hidden;
      /* ← rotateY(180deg) stays here — this is the FACE's own flip
         so it appears correct when the parent is at rotationY:0 */
      transform:rotateY(180deg);
    }

    .card-face-img {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .card-roman { font-family:var(--font-deco); font-size:1.4rem; color:var(--gold); letter-spacing:.2em; }
    .card-art   { font-size:3.5rem; line-height:1; }
    .card-name  { font-family:var(--font-deco); font-size:.85rem; color:var(--cream-dim); letter-spacing:.15em; text-transform:uppercase; }
    .card-name-zh { font-size:.8rem; color:var(--gold-dim); letter-spacing:.1em; }
    .card-border-top,.card-border-bottom {
      width:80%; height:1px;
      background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
    }

    /* ─── CONTENT 6 & 7 ─── */
    #content6 { position:relative; z-index:2; padding:8rem 0 0rem; }
    #content7 { position:relative; z-index:2; padding:8rem 0 0rem;  }
	#content8 { position:relative; z-index:2; padding:8rem 0 6rem;  }
	#content9 { position:relative; z-index:2; padding:8rem 0 6rem;  }
	
	
	@media (max-width:767px) {
	#content4 { position:relative; z-index:2; padding:0rem 0 4rem 0;  }
    #content6 { position:relative; z-index:2; padding:4rem 0 0rem; }
    #content7 { position:relative; z-index:2; padding:4rem 0 0rem;  }
	#content8 { position:relative; z-index:2; padding:4rem 0 6rem;  }
	#content9 { position:relative; z-index:2; padding:4rem 0 6rem;  }
	  
    }
	
	.weblink {
		color:var(--gold);
		transition: color 0.3s ease;
	}
	
	
	.weblink:hover {
		color: var(--yellow);
	}

    .split-wrap {
      display:flex; align-items:center; gap:5rem;
      max-width:1100px; margin:0 auto; padding:0 2rem;
    }
	
	.split-wrap2 {
      align-items:center; gap:5rem;
      max-width:1100px; margin:0 auto; padding:0 2rem;
    }

    .split-text { flex:1; }
    .split-card { flex-shrink:0; display:flex; flex-direction:column; align-items:center; }

    /* ─── TAROT CARD IMAGE (content 7 left column) ─── */
    .split-card-img {
      flex-shrink: 0;
      width: 350px;
      position: relative; /* needed for canvas overlay */
    }

    .tarot-card-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
      
    }

    /* Particle Bridge canvas sits on top of the card image */
    .particle-bridge-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      pointer-events: none;
      z-index: 1;
    }

    /* ─── IPHONE MOCKUP (content 8 right column) ─── */
    .split-mockup {
      flex-shrink: 0;
      width: 240px;
      position: relative;   /* orbit canvas is absolute inside */
    }

    /* Floating keyframe — gentle vertical bob + very subtle tilt rock */
    @keyframes mockup-float {
      0%   { transform: translateY(0px)     rotate(-1deg); }
      30%  { transform: translateY(-10px)   rotate(0deg);  }
      60%  { transform: translateY(-16px)   rotate(0.8deg);}
      100% { transform: translateY(0px)     rotate(-1deg); }
    }

    /* Shadow that breathes in sync with the float */
    @keyframes mockup-shadow {
      0%   { opacity: 0.45; transform: scaleX(1);    }
      30%  { opacity: 0.30; transform: scaleX(0.92); }
      60%  { opacity: 0.20; transform: scaleX(0.84); }
      100% { opacity: 0.45; transform: scaleX(1);    }
    }

    .mockup-img {
      width: 100%;
      height: auto;
      display: block;
      mix-blend-mode: screen;
      filter: brightness(0.88) contrast(1.05);
      position: relative;
      z-index: 1;
      animation: mockup-float 4s ease-in-out infinite;
      transform-origin: bottom center;
    }

    /* Soft drop-shadow beneath the phone (pseudo-element on wrap) */
    .split-mockup::after {
      content: '';
      display: block;
      margin: -8px auto 0;
      width: 60%;
      height: 12px;
      background: radial-gradient(ellipse at center,
        rgba(201,168,76,0.35) 0%, transparent 70%);
      border-radius: 50%;
      animation: mockup-shadow 4s ease-in-out infinite;
    }

    /* Orbit canvas — larger than the phone so symbols can orbit outside it */
    .orbit-canvas {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width:  420px;
      height: 560px;
      pointer-events: none;
      z-index: 2;           /* above the phone image */
    }
	
	
	.coin8-work {
	  margin-top: 80px;
      position: relative;
      flex-shrink: 0;
      width: 420px;
      height: 343px;
    }
	
	.conis8 {
		width:100%;
		
	}
	
	.mobile-break {
		display: none;
	}
	
    @media (max-width:767px) {
      .split-mockup { width: 160px; margin: 0 auto; }
      .orbit-canvas { width: 300px; height: 400px; }
    }

    @media (max-width:767px) {
      .split-wrap { flex-direction:column; gap:3rem;}
      .split-wrap .split-card { order:-1; }
      .split-card-img { width: 250px; margin: 0 auto; }
      .cup-constellation {
        width: 300px;
        height: 380px;
        margin: 0 auto;
      }
	  .coin8-work {
        width: 300px;
        height: 200px;
        margin: 0 auto;
      }
	  .hero-title {
		font-size: 2.2rem;
	  }
	  .hero-title-zh {
		font-size: 1.2rem;
	  }
    }

    /* ─── CLOSING ─── */
    #closing {
      position:relative; z-index:2; padding:8rem 0 10rem;
      text-align:center; background:var(--bg); overflow:hidden;
    }

    .closing-symbol { font-family:var(--font-deco); font-size:5rem; color:rgba(201,168,76,.15); display:block; margin-bottom:1rem; }
    .closing-text   { font-family:var(--font-deco); font-size:clamp(1.2rem,3vw,2rem); font-weight:300; color:var(--cream-dim); letter-spacing:.2em; font-style:italic; }
    .closing-zh     { margin-top:.8rem; font-size:.85rem; color:var(--gold-dim); letter-spacing:.3em; }
    .closing-bg-card { position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); opacity:.04; font-size:20rem; pointer-events:none; line-height:1; }

    /* ─── CUP CONSTELLATION ─── */
    .cup-constellation {
      position: relative;
      flex-shrink: 0;
      width: 420px;
      height: 520px;
    }

    .cup-lines-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .cup-node {
      position: absolute;
      width: 102px;
      height: 132px;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 1;
      filter: drop-shadow(0 0 8px rgba(201,168,76,0.5));
      transition: filter 0.3s ease;
    }

    .cup-node img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .cup-node:hover {
      filter: drop-shadow(0 0 18px rgba(201,168,76,0.95)) drop-shadow(0 0 32px rgba(201,168,76,0.5));
    }

    .cup-node.active {
      filter: drop-shadow(0 0 22px rgba(201,168,76,1)) drop-shadow(0 0 48px rgba(201,168,76,0.7));
    }

    /* floating label on hover */
    .cup-label {
      position: absolute;
      bottom: -1.6rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-deco);
      font-size: 0.85rem;
	  font-weight: 600;
      color: var(--gold);
      letter-spacing: 0.15em;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .cup-node:hover .cup-label {
      opacity: 1;
    }

    @media (max-width: 767px) {
      .cup-constellation {
        width: 300px;
        height: 420px;
      }
      .cup-node {
        width: 85px;
        height: 110px;
      }
    }

    /* ─── SPOTLIGHT EFFECT ─── */
    .spotlight-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }