/* The Temple (2026-09-30): the fortune sticks and ink-bloom page transitions. Loaded last. */

/* ---------- Pages open like ink spreading from the click ---------- */
@property --ink-s{syntax:'<length>';inherits:false;initial-value:0px}
:root[data-transition=page]::view-transition-new(codex-main){
 animation:tpl-ink .95s cubic-bezier(.3,.55,.2,1) both;
 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='38'/%3E%3C/filter%3E%3Ccircle cx='100' cy='100' r='66' filter='url(%23f)'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='38'/%3E%3C/filter%3E%3Ccircle cx='100' cy='100' r='66' filter='url(%23f)'/%3E%3C/svg%3E");
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-size:var(--ink-s) var(--ink-s);mask-size:var(--ink-s) var(--ink-s);
 -webkit-mask-position:calc(var(--ink-x,50vw) - var(--ink-s) / 2) calc(var(--ink-y,40vh) - var(--ink-s) / 2);
 mask-position:calc(var(--ink-x,50vw) - var(--ink-s) / 2) calc(var(--ink-y,40vh) - var(--ink-s) / 2);
}
:root[data-transition=page]::view-transition-old(codex-main){animation:tpl-ink-old .95s ease both}
@keyframes tpl-ink{0%{--ink-s:0px;opacity:.6}25%{opacity:1}100%{--ink-s:340vmax;opacity:1}}
@keyframes tpl-ink-old{to{opacity:.4;filter:saturate(.4) blur(2px)}}
@media(prefers-reduced-motion:reduce){:root::view-transition-new(codex-main),:root::view-transition-old(codex-main){animation:none!important;-webkit-mask:none!important;mask:none!important}}

/* ---------- The fortune sticks ---------- */
.ft-page .page-head p{max-width:720px}
.ft-stage{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:40px;align-items:center;margin-top:24px}
.ft-altar{position:relative;display:grid;justify-items:center;gap:12px;padding:40px 20px 24px;border-radius:26px;background:radial-gradient(70% 60% at 50% 38%,#6e140f33,transparent 70%),radial-gradient(60% 40% at 50% 100%,#3a2412,transparent 70%),linear-gradient(180deg,#1a130e,#0e0b08);box-shadow:inset 0 0 0 1px #e8c27a22,0 30px 60px #000a;overflow:hidden;isolation:isolate}
.ft-table{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#3a2414,#23150b);border-top:1px solid #e8c27a33;z-index:-1}
.ft-incense{position:absolute;left:14%;bottom:30%;width:40px;height:140px;pointer-events:none}
.ft-incense i{position:absolute;bottom:0;left:18px;width:4px;height:60%;border-radius:2px;background:linear-gradient(0deg,#6e3a1a,#c77a3a 90%,#ffb35a)}
.ft-incense i:nth-child(2){left:10px;transform:rotate(-8deg);height:55%}.ft-incense i:nth-child(3){left:26px;transform:rotate(7deg);height:52%}
.ft-incense:before{content:'';position:absolute;bottom:55%;left:0;width:40px;height:120px;background:radial-gradient(40% 30% at 50% 80%,#ffffff22,transparent 70%);filter:blur(6px);animation:ft-smoke 5s ease-in-out infinite}
@keyframes ft-smoke{0%{transform:translateY(20px) scaleX(.6);opacity:0}40%{opacity:.8}100%{transform:translateY(-70px) translateX(12px) scaleX(1.6);opacity:0}}
.ft-cup-btn{position:relative;width:min(240px,62vw);padding:0;border:0;background:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.ft-cup-btn:active{cursor:grabbing}
.ft-cup-btn:focus-visible{outline:3px solid var(--focus,#f1d395);outline-offset:6px;border-radius:18px}
.ft-cup{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 92%}
.ft-cup.is-shaking{animation:ft-shake .11s ease-in-out infinite alternate}
@keyframes ft-shake{from{transform:rotate(-7deg) translateY(-4px)}to{transform:rotate(7deg) translateY(2px)}}
.ft-stick{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.ft-stick>rect{transform-box:fill-box}
.ft-cup.is-shaking .ft-stick>rect{animation:ft-jiggle .07s linear infinite alternate;animation-delay:calc(var(--i) * -11ms)}
@keyframes ft-jiggle{from{transform:translateY(-4px)}to{transform:translateY(3px)}}
.ft-stick.is-rising>rect{transform:translateY(-70px);transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.ft-stick.is-gone{opacity:0}
.ft-fallen{position:absolute;inset:0;pointer-events:none}
.ft-fly{position:absolute;width:10px;height:150px;transform-origin:50% 50%}
.ft-fly i{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,#c79a55,#f0d49a 50%,#b8863f);box-shadow:0 6px 14px #000a}
.ft-fly i:before{content:'';position:absolute;left:0;right:0;top:0;height:16px;border-radius:4px 4px 2px 2px;background:#b3261e}
.ft-fly b{position:absolute;left:50%;top:40px;translate:-50% 0;writing-mode:vertical-rl;font-family:var(--serif,Georgia,serif);font-weight:400;font-size:11px;color:#5b0f0b}
.ft-fly.is-fade{transition:opacity .8s;opacity:0}
.ft-controls{display:grid;justify-items:center;gap:6px;z-index:1}
.ft-controls small{color:#cfc6ad;font-size:.78rem}
.ft-card-wrap{perspective:1400px}
.ft-card{position:relative;min-height:440px;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,1.25,.5,1)}
.ft-card.is-flipped{transform:rotateY(180deg)}
.ft-card.is-kept{transition:none}
.ft-face{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.ft-back{display:grid;place-content:center;justify-items:center;gap:14px;background:repeating-linear-gradient(45deg,#6e140f 0 14px,#5b0f0b 14px 28px);box-shadow:inset 0 0 0 2px #e8c27a,inset 0 0 0 8px #5b0f0b,inset 0 0 0 9px #e8c27a88,0 30px 60px #000a;color:#f3d58f;text-align:center}
.ft-back-seal{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbe7b0,#d8ab55 60%,#a8792c);color:#5b0f0b;font:400 54px var(--serif,Georgia,serif);box-shadow:0 10px 30px #0009}
.ft-back p{margin:0;font-size:.9rem;letter-spacing:.06em}
.ft-front{transform:rotateY(180deg);background:radial-gradient(90% 60% at 50% 0%,#f8efd9,#efe2c2 60%,#e2d0a6);box-shadow:inset 0 0 0 2px #b3261e,inset 0 0 0 7px #efe2c2,inset 0 0 0 8px #b3261e88,0 30px 60px #000a;color:#2a1a10}
.ft-front-in{display:grid;gap:16px;padding:28px 30px}
.ft-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ft-tier{padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--tier) 30%,#fff);border:1px solid color-mix(in srgb,var(--tier) 80%,#000);color:#2a1a10;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ft-num{display:grid;justify-items:end;line-height:1}
.ft-num b{font:400 2.6rem var(--serif,Georgia,serif);color:#b3261e}
.ft-num small{font-size:.72rem;color:#6b5a48;letter-spacing:.1em;text-transform:uppercase}
.ft-verse{display:grid;gap:4px;margin:0;font:400 clamp(1.4rem,2.6vw,1.9rem)/1.2 var(--serif,Georgia,serif)}
.ft-verse span:last-child{color:#6b3a20}
.ft-advice{margin:0;padding:12px 14px;border-left:3px solid #b3261e;background:#ffffff66;font-size:1rem;line-height:1.5}
.ft-advice small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a6a4a}
.ft-points{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:#2a1a100d;border:1px solid #2a1a1022;color:inherit;text-decoration:none;transition:background .25s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.ft-points:hover{background:#2a1a1018;transform:translateX(3px)}
.ft-points img{width:52px;height:52px;border-radius:12px;object-fit:cover;object-position:50% 18%}
.ft-points span{display:grid;flex:1;min-width:0}
.ft-points small{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a6a4a}
.ft-points b{font:400 1.15rem var(--serif,Georgia,serif)}
.ft-note{margin:0;font-size:.82rem;color:#6b5a48}
.ft-actions{display:flex;flex-wrap:wrap;gap:8px}
.ft-front .button{color:#2a1a10;border-color:#2a1a1055;background:#ffffff88}
@media(max-width:860px){.ft-stage{grid-template-columns:1fr}.ft-card{min-height:470px}}
@media(prefers-reduced-motion:reduce){.ft-cup.is-shaking,.ft-cup.is-shaking .ft-stick>rect,.ft-incense:before{animation:none}.ft-card{transition:none}}
:root[data-motion=off] :is(.ft-cup.is-shaking,.ft-cup.is-shaking .ft-stick>rect,.ft-incense:before){animation:none}