/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-900:oklch(21% .034 264.665);--color-neutral-100:oklch(97% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-semibold:600;--font-weight-bold:700;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--transition-duration-fast:.6s;--transition-duration-medium:1.5s;--transition-duration-slow:2.5s;--translate-50:50vh}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-3{margin-block:calc(var(--spacing)*3)}.my-5{margin-block:calc(var(--spacing)*5)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-full{max-width:100%}.shrink{flex-shrink:1}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-x-10{--tw-translate-x:calc(var(--spacing)*-10);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-10{--tw-translate-x:calc(var(--spacing)*10);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-10{--tw-translate-y:calc(var(--spacing)*-10);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-0{--tw-translate-y:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-10{--tw-translate-y:calc(var(--spacing)*10);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-50{--tw-translate-y:var(--translate-50);translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-90{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border-0{border-style:var(--tw-border-style);border-width:0}.bg-black{background-color:var(--color-black)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.object-contain{object-fit:contain}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-5{padding:calc(var(--spacing)*5)}.px-4{padding-inline:calc(var(--spacing)*4)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-black{color:var(--color-black)}.text-gray-100{color:var(--color-gray-100)}.text-gray-900{color:var(--color-gray-900)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-900{color:var(--color-neutral-900)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.italic{font-style:italic}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-sm{--tw-blur:blur(var(--blur-sm));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-none{transition-property:none}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.duration-fast{--tw-duration:var(--transition-duration-fast);transition-duration:var(--transition-duration-fast)}.duration-medium{--tw-duration:var(--transition-duration-medium);transition-duration:var(--transition-duration-medium)}.duration-slow{--tw-duration:var(--transition-duration-slow);transition-duration:var(--transition-duration-slow)}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (min-width:48rem){.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}}:root{--anim-speed-fast:.6s;--anim-speed-medium:1.5s;--anim-speed-slow:2.5s;--cc-bottom-offset:12vh;--blur-feather:10vmin;--slide-duration:10s;--slide-easing:ease-in-out}section{background-color:var(--section-bg,transparent)}img,video{border:none}span[data-anim-delay]{white-space:pre-wrap}.caption{text-align:center;z-index:30}#section-placeholder{background:0 0}@keyframes fadeOut{to{opacity:0;pointer-events:none;transform:translateY(-10px)}}#version-tag{color:#fff;background:#000000bf;font-family:sans-serif;font-size:.85rem;animation:1s 20s forwards fadeOut}#audio-gate-container,.audio-gate{pointer-events:auto;background:var(--gate-bg,#0000008c);-webkit-backdrop-filter:blur(var(--gate-blur,3px));backdrop-filter:blur(var(--gate-blur,3px));opacity:1;z-index:var(--gate-z,2147480000);place-items:center;transition:opacity .4s;display:grid;position:fixed;inset:0}#audio-gate-container.fade-in,.audio-gate.fade-in,#audio-gate-container.fade-out,.audio-gate.fade-out{opacity:0}#audio-gate-container .audio-prompt,.audio-gate .audio-prompt,.sc-audio-gate .audio-prompt{background:var(--gate-card-bg,#ffffff14);border-radius:var(--gate-card-radius,22px);padding:var(--gate-card-padding,1.15rem 1.4rem);color:var(--gate-card-fg,#fff);width:var(--gate-card-width,min(92vw,420px));text-align:center;box-sizing:border-box;-webkit-backdrop-filter:blur(26px);border:1px solid #ffffff4d;max-width:420px;max-height:min(86svh,560px);box-shadow:inset 0 1px #ffffff59,0 30px 60px #00000073}.audio-prompt .audio-prompt-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:.5rem;display:flex}.audio-prompt button{cursor:pointer;color:#fff;background:#ffffff1f;border:1px solid #ffffff8c;border-radius:999px;padding:.65rem 1.5rem;font-size:1rem;font-weight:600;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:inset 0 1px #ffffff59,0 12px 26px #00000059}.audio-prompt button:hover,.audio-prompt button:focus-visible{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff73,0 16px 32px #0006}.audio-prompt .btn-enable{background:linear-gradient(135deg,#46d782d9,#22a75ee6)}.audio-prompt .btn-decline{background:linear-gradient(135deg,#ec6262d9,#d53636e6)}.audio-prompt #audio-blog{color:#fff;background:#ffffff2e;border:1px solid #ffffffa6;border-radius:999px;margin-top:.25rem;padding:.55rem 1.25rem;font-weight:600;text-decoration:none;transition:transform .18s,box-shadow .18s;display:inline-block;box-shadow:inset 0 1px #ffffff59,0 10px 24px #00000059}.audio-prompt #audio-blog:hover,.audio-prompt #audio-blog:focus-visible{transform:translateY(-1px);box-shadow:inset 0 1px #ffffff73,0 14px 30px #0006}@media (max-width:600px){#audio-gate-container .audio-prompt,.audio-gate .audio-prompt,.sc-audio-gate .audio-prompt{border-radius:calc(var(--gate-card-radius,12px) - 2px);width:min(94vw,26rem);padding:.875rem 1rem}}.hidden{visibility:hidden;pointer-events:none}.video-reel-controls .pause-button,.video-reel-pause-overlay .pause-button{transition:opacity .4s ease-in-out,visibility .4s}.video-reel-overlay,.video-reel-wrapper{background:0 0}section:before{background:inherit}#storycore-progress-bar{opacity:0;background:linear-gradient(#21734633,#4caf5099);transition:transform .2s ease-out,opacity .5s ease-in;transform:scaleY(0)}#storycore-progress-thumb{opacity:0;background-color:#78787899;border-radius:3px;width:6px;height:40px;transition:top .2s ease-out,opacity .4s ease-in}section:not(.reveal-now) [data-animated=false],section:not(.reveal-now) [data-animated="0"],section:not(.reveal-now) [data-animated]:not([data-animated=true]){opacity:0;visibility:hidden}section.reveal-now [data-animated]{opacity:1;visibility:visible}@media (prefers-reduced-motion:no-preference){.reel-anim{will-change:left,top,width,height;transition:left .35s,top .35s,width .35s,height .35s}}.reel-no-anim{transition:none!important}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}/* ─────────────────────────────────────────────────────────────
   ANIMATION CORE (GSAP-only friendly)
   - Keep structure/utilities used by JS
   - No CSS keyframes for motion (GSAP owns all animation)
   ──────────────────────────────────────────────────────────── */

/* Background layer safety defaults */
:root { --pre-transform: none; --post-transform: none; /* --anim-speed: 1.1s; */ }

.bg-image-layer {
  background-size: cover;
  background-repeat: no-repeat;
  /* positioning comes from layout.css to avoid stacking conflicts */
}

/* The animatable child that isolates background-position from the parent */
.bg-anim-sprite {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: cover;
  isolation: isolate;
  pointer-events: none;
}

/* =========================
   INITIAL STATE FOR TEXT (GSAP toggles [data-animated])
   ========================= */

/* Always hide until explicitly animated via JS */
[data-animated="false"],
[data-animated]:not([data-animated="true"]) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Reveal state (after your GSAP flips it) */
[data-animated="true"] {
  opacity: 1;
  visibility: visible;
}

/* Optional gated hiding: only while primed */
section.is-primed [data-animated]:not([data-animated="true"]),
section.is-primed [data-animated="false"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================
   GATE HOLD (visibility only; GSAP controls motion)
   ========================= */

/* Gate-hold should not hide section content; text visibility is controlled
   by [data-animated] + JS. Only suppress HUD controls while the gate is up. */
.gate-hold .lite-hud-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Reduced motion: no transitions; GSAP should respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-animated] {
    transition: none !important;
  }
}

/* Make slide motion visible on perfect-fit images (pure utility; optional) */
.slide-overscan { transform: scale(var(--slide-overscan, 1.06)); transform-origin: center; }/* ==========================================================================  
   LAYOUT.CSS  
   --------------------------------------------------------------------------
   Purpose: Handles structural layout, sizing, and positioning of sections,  
   containers, safe zones, reels, HUD, and overlays.  

   🚫 Does NOT define animations, durations, or easing.  
   ✅ All animations are now driven by GSAP in JS (animate.css is deprecated).  
   ✅ Default values for durations/easing live in theme.css.  

   Key Responsibilities:  
   - Fullscreen section sizing and snap scroll.  
   - Container padding and flow alignment.  
   - Safe zones (top/bottom overlays, logos, HUD buttons).  
   - Video reel layouts and controls.
   - Background layers (static positioning only; may include `will-change` hints).  
   - Generic positioning helpers (.sc-bg-image, .sc-content, .section-image).  

   Notes:  
   - Keep this file animation-free.  
   - If you need to change animation timings, use theme.css.  
   - All dynamic animations should be implemented in GSAP (JS).  
   - This file is safe to load before animation CSS (base structure first).  
   ========================================================================== */


/* ---------- Global Resets ---------- */

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  backface-visibility: hidden;
}

html:not(.blog-mode),
body:not(.blog-mode) {
  overflow: hidden;
}

html.blog-mode,
body.blog-mode {
  overflow: auto !important;
  height: auto !important;
}

/* Section sizing (respects visible viewport for content + HUD) */
section {
  position: relative;
  height: 100dvh;          /* dynamic visible viewport */
  min-height: 100svh;      /* fallback for small viewport height */
  overflow: hidden;
  scroll-snap-align: start;
  box-sizing: border-box;
  isolation: isolate;
}

/* Background layers can bleed into unsafe areas (scoped to bg layer only) */
.bg-image-layer,
.bg-image-layer img,
.bg-image-layer canvas {
  width: 100%;
  height: 100lvh;          /* full device height (goes under notches/bars) */
  display: block;
}

section .container {
  height: 100%;
  max-height: 100vh;
  overflow-y: hidden;
  position: relative;
  padding-top: var(--padding-v, 1rem);
  padding-bottom: var(--padding-v, 1rem);
  padding-left: var(--padding-h, 1rem);
  padding-right: var(--padding-h, 1rem);
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}



section .container .content {
  max-height: calc(100vh - var(--padding-v, 1rem) * 2);
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Use dynamic viewport height where supported so vh paddings work reliably on mobile */
@supports (height: 100dvh) {
  section .container .content {
    max-height: calc(100dvh - (var(--padding-v, 1rem) * 2));
  }
}

/* No double padding when frames are used */
section .container[data-has-frames] > .content {
  padding: 0 !important;
}

/* Prevent content images from inheriting full-viewport height */
section .container .content img {
  height: auto !important;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: inline-block;
}

/* --- Click-through spacers: prevent empty/inert blocks from eating taps --- */
section .container > div:empty {
  pointer-events: none !important;
}

/* Height-only spacer divs with no interactive children should also be inert */
section .container > div[style*="height"]:not(:has(a,button,[role="button"],input,select,textarea,label)) {
  pointer-events: none !important;
}

section[data-flow="center"] {
  align-items: center;
}

section[data-flow="bottom"] {
  align-items: flex-end;
}

section[data-padding="none"] .container,
section[data-padding-v="none"] .container,
section[data-padding-h="none"] .container {
  padding: 0 !important;
}

section[data-padding="sm"] .container {
  padding: 1rem;
}
section[data-padding="md"] .container {
  padding: 2rem;
}
section[data-padding="lg"] .container {
  padding: 3rem;
}
section[data-padding-v="sm"] .container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
section[data-padding-v="md"] .container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
section[data-padding-v="lg"] .container {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
section[data-padding-h="sm"] .container {
  padding-left: 1rem;
  padding-right: 1rem;
}
section[data-padding-h="md"] .container {
  padding-left: 2rem;
  padding-right: 2rem;
}
section[data-padding-h="lg"] .container {
  padding-left: 3rem;
  padding-right: 3rem;
}

section[data-padding-h="none"] { --padding-h: 0; }
section[data-padding-h="sm"]   { --padding-h: 1rem; }
section[data-padding-h="md"]   { --padding-h: 2rem; }
section[data-padding-h="lg"]   { --padding-h: 3rem; }
section[data-padding-v="none"] { --padding-v: 0; }
section[data-padding-v="sm"]   { --padding-v: 1rem; }
section[data-padding-v="md"]   { --padding-v: 2rem; }
section[data-padding-v="lg"]   { --padding-v: 3rem; }

.scroll-arrow {
  position: absolute;   /* JS sets bottom/left */
  left: 50%;            /* JS also resets, but this centers until JS runs */
  transform: translateX(-50%);
  z-index: 850;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.40);
  color: white;
  cursor: pointer;

  opacity: 0;           /* hidden by default */
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 768px) {
  .scroll-arrow {
    bottom: max(3rem, calc(12dvh + env(safe-area-inset-bottom, 0px)));
  }
}

.safe-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 50;
  pointer-events: none;
  padding: 1rem;
}
.safe-top>* {
  pointer-events: auto;
}

.safe-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 50;
  padding: 2rem;
}

.safe-bottom-right {
  position: absolute;
  right: 1rem;
  bottom: calc(3rem + env(safe-area-inset-bottom, 10px));
  z-index: 1000;
}

.section-image {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
.section-image.top-left     { top: 1rem; left: 1rem; width: 96px; }
.section-image.top-center   { top: 1rem; left: 50%; transform: translateX(-50%); width: 120px; }
.section-image.top-right    { top: 1rem; right: 1rem; width: 96px; }
.section-image.middle-left  { top: 50%; left: 1rem; transform: translateY(-50%); width: 120px; }
.section-image.center       { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; }
.section-image.middle-right { top: 50%; right: 1rem; transform: translateY(-50%); width: 120px; }
.section-image.bottom-left  { bottom: 1.5rem; left: 1.5rem; width: 96px; }
.section-image.bottom-center{ bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: 120px; }
.section-image.bottom-right { bottom: 1.5rem; right: 1.5rem; width: 96px; }
.section-image.logo-top-right {
  top: 2rem;
  right: 2rem;
  width: 400px;
  max-width: none;
  height: auto;
}
@media (max-width: 768px) {
  .section-image.top-left,
  .section-image.top-right,
  .section-image.bottom-left,
  .section-image.bottom-right {
    width: 80px;
  }
  .section-image.center {
    width: 150px;
  }
  .section-image.logo-top-right {
    width: 200px;
    top: 3rem;
    right: 1rem;
  }
}

/* --- Overlay image interactivity (opt-in) ---
   Default overlay images are click-through (`pointer-events: none` on wrapper).
   Add `.interactive` to the positioned wrapper (e.g., <a class="section-image interactive">)
   to allow clicks while keeping the inner <img> transparent to pointer events. */
.section-image.interactive { pointer-events: auto; }
.section-image.interactive img { pointer-events: none; }

section.video-reel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
section.video-reel .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Override container alignment for split layouts (landscape only) */
@media (orientation: landscape) {
  section.video-reel[data-reel-layout-h="left"] .container,
  section.video-reel[data-reel-layout-h="right"] .container {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
}

.video-reel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.video-reel-controls {
  position: absolute;
  top: 3.5rem;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem; /* a bit more breathing room */
  pointer-events: none;
  will-change: opacity;
  transition: opacity var(--hud-fade-duration) var(--hud-fade-ease);
}

.video-reel-controls .button-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem; /* space between button and counter */
  pointer-events: auto;
}


/* Uniform button sizing */
.video-reel-controls .hud-btn {
  width: var(--hud-btn, 3rem);
  height: var(--hud-btn, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hud-fade-duration) var(--hud-fade-ease);
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}

.video-reel-controls.hud-active .hud-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Hot-when-hidden exceptions: allow specific controls to be interactive
   even when the HUD is hidden (wake-on-tap still happens in JS). */
.video-reel-controls:not(.hud-active) [data-hot-when-hidden] {
  pointer-events: auto !important;
}
/* If the hot element is a HUD button, keep it visible too. */
.video-reel-controls:not(.hud-active) [data-hot-when-hidden].hud-btn,
.video-reel-controls:not(.hud-active) .button-stack[data-hot-when-hidden] .hud-btn,
.video-reel-controls:not(.hud-active) .button-stack [data-hot-when-hidden].hud-btn {
  opacity: 1 !important;
}

/* Like button is always visible, regardless of HUD state */
.video-reel-controls .like-button {
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* Wake zone only enabled when HUD is inactive */
.video-reel-controls:not(.hud-active) ~ .reel-wake-zone {
  pointer-events: auto;
}

.video-reel-controls .top-row {
  gap: 0.5rem;
}

.video-reel-controls .pause-button.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--pause-btn, 60px);
  height: var(--pause-btn, 60px);
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* High-contrast text when blurred gutters are active (reel left/right layouts) */
section[data-blur-gutters="1"] {
  color: #fff;
}
section[data-blur-gutters="1"] h1,
section[data-blur-gutters="1"] h2,
section[data-blur-gutters="1"] h3,
section[data-blur-gutters="1"] h4,
section[data-blur-gutters="1"] h5,
section[data-blur-gutters="1"] h6,
section[data-blur-gutters="1"] p,
section[data-blur-gutters="1"] span {
  color: #fff;
}

.video-reel-controls:not(.hud-active) .pause-button.centered {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hud-fade-duration) var(--hud-fade-ease);
}

/* Mute nudge tip */
.sc-nudge-tip {
  position: absolute;
  z-index: 10000;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  background: rgba(0,0,0,0.85);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  will-change: opacity, transform;
  white-space: nowrap;
}

/* Base arrow pseudo (we specialize per side) */
.sc-nudge-tip::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border: 6px solid transparent;
}

/* Since the mute button is on the RIGHT side of the HUD,
   we prefer placing the tip to the LEFT of the button.
   That means the arrow should point RIGHT (→) out of the tip. */
.sc-nudge-tip--left::after, .sc-nudge-tip.sc-nudge--left::after {
  top: 50%;
  right: -12px;                 /* arrow sits on the RIGHT edge of the tip */
  transform: translateY(-50%);
  border-left-color: rgba(0,0,0,0.85);  /* triangle points RIGHT */
}

/* Optional fallbacks if you ever place it elsewhere */
.sc-nudge-tip--right::after, .sc-nudge-tip.sc-nudge--right::after {
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
  border-right-color: rgba(0,0,0,0.85); /* points LEFT */
}
.sc-nudge-tip--above::after, .sc-nudge-tip.sc-nudge--above::after {
  left: 12px;
  bottom: -12px;
  border-top-color: rgba(0,0,0,0.85);   /* points DOWN */
}
.sc-nudge-tip--below::after, .sc-nudge-tip.sc-nudge--below::after {
  left: 12px;
  top: -12px;
  border-bottom-color: rgba(0,0,0,0.85);/* points UP */
}

@keyframes sc-nudge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.sc-nudge-pulse {
  animation: sc-nudge-pulse .8s ease-in-out 0s 2;
  transform-origin: center;
}

/* --- Overlay image sizing guard (non-destructive) ---
   Ensures JS-set sizes like "width: 200" are not overridden by any
   global img { width:100% } rules. Does not affect inline content images. */
.sc-image-overlays .section-image > img {
  width: auto;
  height: auto;
  max-width: none;
}

/* Clickable overlay safety net (optional) */
.sc-image-overlays a.section-image { pointer-events: auto; }
.sc-image-overlays a.section-image > img { pointer-events: none; }



/* --- Landscape split rails for ::frame: (margin rails; no grid on container) --- */
@media (orientation: landscape) {
  /* Keep the container as a normal block so non-frame children (e.g. headings, images)
     are unaffected. Only the .frame elements get rail behavior. */
  section .container[data-has-frames] {
    display: block;
  }

  /* Default rail is a fixed 50% of the viewport (capped), centered. */
  section .container[data-has-frames] > .frame {
    display: block;
    width: clamp(28rem, 50vw, 960px);
    max-width: clamp(28rem, 50vw, 960px);
    margin-inline: auto; /* center by default */
  }

  /* Place the rail left/center/right by changing margins only (no grid). */
  /* Map authoring semantics directly: .frame--left => left rail; .frame--right => right rail. */
  section .container[data-has-frames] > .frame.frame--left   { margin-left: 0;   margin-right: auto; } /* LEFT  */
  section .container[data-has-frames] > .frame.frame--center { margin-left: auto; margin-right: auto; } /* CENTER */
  section .container[data-has-frames] > .frame.frame--right  { margin-left: auto; margin-right: 0; }   /* RIGHT  */

  /* Center rail respects horizontal padding to shrink nicely */
  section .container[data-has-frames] > .frame.frame--center {
    max-width: min(clamp(28rem, 50vw, 960px), calc(100% - (var(--padding-h, 1rem) * 2)));
    width: auto;
  }

  /* Reasonable text width inside each frame. */
  section .container[data-has-frames] > .frame > * {
    max-width: 64ch;
    width: 100%;
  }
}

/* Portrait/vertical: frames behave like normal full‑width blocks. */
@media (orientation: portrait) {
  section .container[data-has-frames] > .frame {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}