*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --amber: #c9a96e; --amber-2:#e8c98a; --cream: #ede0c8; --red: #d94040; --red-glow: #ff5c4d; }
html { scroll-behavior: auto; }
.body { background: #000; color: var(--cream); font-family: "Special Elite", Georgia, serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #3a3028; }

/* HOOK Section CSS Start Here */
#hook { 
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: #000; 
  padding: 60px 40px; 
  box-sizing: border-box; 
}
#hookText { 
  text-align: center; 
  width: 100%; 
  max-width: 1400px; 
  font-size: 1.5rem; 
  line-height: 1.6; 
  opacity: 1; 
  padding: 0; 
}
#hookText span { 
  display: block; 
  margin-top: 2rem; 
  font-family: 'Caveat', cursive; 
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); 
  color: rgba(201, 169, 110, .8); 
  letter-spacing: .06em; 
}
/* HOOK Section CSS End Here */

/* DESCENT Section CSS Start Here */
.story { position: relative; z-index: 1 }
.sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 2200px; perspective-origin: 50% 42%; background: #000000e6; }
.floor { position: absolute; left: 50%; top: 62%; width: 260vw; height: 260vh; transform: translate(-50%, -50%) rotateX(82deg);}
.card { position: absolute; left: 50%; top: 50%; width: min(900px, 82vw); transform-style: preserve-3d; will-change: transform, opacity, filter; opacity: 0; backface-visibility: hidden; text-shadow: rgb(204, 204, 204) 0px 1px 0px, rgb(201, 201, 201) 0px 1px 0px, rgb(187, 187, 187) 0px 2px 0px, rgb(185, 185, 185) 0px 4px 0px, rgb(170, 170, 170) 0px 4px 5px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.2) 0px 3px 5px, rgba(0, 0, 0, 0.25) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.15) 0px 20px 20px; }
.txt { font-size: clamp(2rem, 3vw, 3.8rem); line-height: 1.35; font-weight: 700; text-align: center; text-shadow: 0 0 40px rgba(120, 160, 255, .18); }
.txt span{font-size:28px; color:rgba(201,169,110,.5); padding-bottom: .5rem;}
.card h2.txt { font-size: clamp(3rem, 6vw, 6rem); letter-spacing: .35em; color: #ff4d4d; text-shadow: 0 0 50px rgba(255, 60, 60, .65), 0 0 120px rgba(255, 60, 60, .25); }
/* DESCENT Section CSS End Here */

/* Breath of Relief Section CSS Start Here */
.story-wrapper.recovery .txt { color: #fff; text-shadow: 0 0 24px rgba(232, 201, 138, .35), 0 0 55px rgba(255, 246, 224, .2); opacity: 1;}
/* Breath of Relief Section CSS End Here */

/* PULSE Section CSS Start Here */
#pulse-section { position: relative; height: 300vh; background: #000; }
#pulse-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vh, 2.5rem); overflow: hidden; }
.pulse-svg-wrap { width: min(90vw, 1000px); position: relative; }
.pulse-svg-wrap svg { width: 100%; height: clamp(100px, 18vh, 180px); display: block; overflow: visible; }
#pulsePath { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(217, 64, 64, .6)); }
.pulse-bpm { position: absolute; top: -1.8rem; right: 0; font-size: .75rem; letter-spacing: .14em; color: rgba(217, 64, 64, .7); opacity: 0; }
.pulse-caption { text-align: center; font-size: clamp(.95rem, 2.4vw, 1.4rem); color: rgba(217, 64, 64, .85); opacity: 0; min-height: 1.5em; max-width: min(52ch, 90vw); line-height: 1.55; }

@media only screen (max-width: 767px) {
  .pulse-svg-wrap svg { height: 100%; }
}
/* PULSE Section CSS End Here */

/* STAR WARS CRAWL Section CSS Start Here */
#climax-section { position: relative; height: 400vh; background: #000; }
#climax-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000; perspective: 500px; perspective-origin: 50% 100%; }
#climax-track-outer { position: absolute; bottom: -10vh; left: 50%; transform: translateX(-50%) rotateX(26deg); transform-origin: center bottom; transform-style: preserve-3d; width: min(82vw, 720px); }
#climax-track { width: 100%; padding-bottom: 6vh; text-align: center; }
.crawl-line { display: block; width: 100%; text-align: center; font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.35; color: var(--cream); margin-bottom: .6em; opacity: 0; text-shadow: 0 0 24px rgba(201, 169, 110, .35); }
.crawl-line.big { font-size: clamp(2rem, 5.5vw, 4.2rem); color: #fff; font-weight: 700; text-shadow: 0 0 40px rgba(255, 255, 255, .25); }
#climax-sky { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(200, 150, 50, 0) 0%, transparent 100%); opacity: 0; pointer-events: none; z-index: 1; }
#climax-flash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 220, .9), rgba(255, 200, 80, .4), transparent 65%); opacity: 0; pointer-events: none; z-index: 2; }
/* STAR WARS CRAWL Section CSS End Here */

/* THE DOOR Section CSS Start Here*/
#door-section { min-height: 100vh; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 1.5rem; gap: 1.5rem; }
.door-tagline { font-family: "Caveat", cursive; font-size: clamp(1.1rem, 3vw, 1.7rem); color: var(--amber); text-align: center; max-width: 38ch; opacity: 0; line-height: 1.5; }
.door-wrap { position: relative; perspective: 2000px; opacity: 0; }
.door-frame { width: clamp(130px, 18vw, 200px); height: clamp(200px, 28vw, 300px); border: 4px solid #4a2e0a; background: #1a0d02; position: relative; overflow: hidden; cursor: pointer; box-shadow: 0 0 40px rgba(0, 0, 0, .6), 0 0 0 1px #2a1a04; }
.door-leaf { position: absolute; inset: 0; background: linear-gradient(105deg, #3d2008 0%, #5c3212 40%, #2a1504 100%); transform-origin: left center; transform-style: preserve-3d; }
.door-panel-t { position: absolute; top: 14px; left: 14px; right: 14px; height: 36%; border: 1.5px solid rgba(201, 169, 110, .2); }
.door-panel-b { position: absolute; bottom: 14px; left: 14px; right: 14px; height: 44%; border: 1.5px solid rgba(201, 169, 110, .2); }
.door-knob { position: absolute; right: 14px; top: 56%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f0d080, #a07020); box-shadow: 0 0 8px rgba(220, 180, 80, .5); }
.door-glow { position: absolute; inset: -30px; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(255, 245, 200, .9), rgba(220, 170, 60, .4), transparent 65%); filter: blur(22px); }
.door-hint { font-family: "Caveat", cursive; font-size: 1.1rem; color: rgba(201, 169, 110, .55); letter-spacing: .08em; animation: hintPulse 2.4s ease-in-out infinite; }
@keyframes hintPulse {
  0%, 100% { opacity: .4 }
  50% { opacity: .9 }
}
/* THE DOOR Section CSS End Here*/

/* FIELD OVERLAY CSS Start Here*/
#field-overlay { position: fixed; inset: 0; z-index: 5000; overflow-y: auto; overflow-x: hidden; opacity: 0; pointer-events: none; }
#field-overlay.open { pointer-events: all; }
.field-bg-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.field-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; animation: fieldKenBurns 20s ease-in-out infinite alternate; will-change: transform; }
@keyframes fieldKenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
.field-gradient-overlay { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(4, 3, 2, .92) 0%, rgba(4, 3, 2, .78) 18%, rgba(4, 3, 2, .48) 38%, rgba(4, 3, 2, .18) 58%, rgba(4, 3, 2, 0) 78%), linear-gradient(to bottom, rgba(4, 3, 2, .35) 0%, rgba(4, 3, 2, 0) 22%); }
/* FIELD OVERLAY CSS End Here*/

/* CTA card CSS Start Here */
.field-card { position: relative; z-index: 10; width: min(640px, 90vw); margin: clamp(3vh, 6vh, 7vh) auto clamp(6vh, 12vh, 14vh); -webkit-backdrop-filter: blur(14px); padding: clamp(2rem, 5vh, 3.5rem) clamp(1.5rem, 4vw, 2.8rem); text-align: center; }
.fc-body { font-family: "Special Elite", Georgia, serif; font-size: clamp(.95rem, 2.2vw, 1.25rem); line-height: 1.8; color: rgba(237, 227, 205, .95); margin-bottom: 1rem; opacity: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .9); }
.fc-italic { font-family: "Caveat", cursive; font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--amber-2); line-height: 1.4; margin-bottom: 1rem; opacity: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.fc-rule { width: 1px; height: 2.5rem; background: linear-gradient(to bottom, transparent, var(--amber), transparent); margin: 1.2rem auto; opacity: 0; }
.fc-mission { font-family: "Caveat", cursive; font-size: clamp(1.3rem, 3.4vw, 2rem); line-height: 1.2; color: #fff; margin-bottom: 1.8rem; opacity: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .9), 0 0 40px rgba(0, 0, 0, .6); }
.fc-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; opacity: 0; }
.btn-gold { padding: .9rem 2.1rem; font-family: "Caveat", cursive; font-size: clamp(1.1rem, 2.4vw, 1.15rem); font-weight: 700; color: #0a0a0a; background: var(--amber-2); border: none; cursor: pointer; text-decoration: none; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); position: relative; transition: background .2s, transform .2s; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.btn-gold::before { content: ""; position: absolute; inset: 4px; border: 1.5px dashed rgba(0, 0, 0, .2); pointer-events: none; }
.btn-gold:hover { background: #f5dfa8; transform: translateY(-3px) rotate(-.5deg); }
.btn-outline { padding: .9rem 2.1rem; font-family: "Caveat", cursive; font-size: clamp(1.1rem, 2.4vw, 1.15rem); font-weight: 700; color: var(--amber-2); background: transparent; border: 2px solid rgba(232, 201, 138, .4); cursor: pointer; text-decoration: none; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); transition: border-color .2s, color .2s, transform .2s; }
.btn-outline:hover { border-color: rgba(232, 201, 138, .9); color: #fff; transform: translateY(-3px) rotate(.5deg); }
.fc-closing { font-family: "Caveat", cursive; font-size: clamp(.82rem, 1.8vw, 1rem); color: rgba(225, 213, 190, .8); letter-spacing: .04em; margin-bottom: 1rem; opacity: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); }
.fc-back { background: rgba(0, 0, 0, .3); border: 1px solid rgba(225, 213, 190, .4); color: rgba(237, 227, 205, .85); font-family: "Caveat", cursive; font-size: .9rem; padding: .4rem 1.1rem; cursor: pointer; transition: color .2s, border-color .2s, background .2s; opacity: 0; }
.fc-back:hover { color: var(--amber); border-color: rgba(201, 169, 110, .55); }
/* CTA card CSS End Here */

/*Footer CSS Start Here*/
footer { padding: 2rem 1rem; background: #000; text-align: center; font-size: .7rem; letter-spacing: .1em; color: rgba(176, 156, 127, .3); }
/*Footer CSS End Here*/