/* Play layer: optional playful touches over the approved site.
   Each block is gated by html[data-play~="name"], which assets/js/play.js sets.
   Remove play.css + play.js from scripts/build-site.py to drop the whole layer. */

/* 1. seal: vermilion stamp on each case */
.play-seal{position:relative;display:inline-block;filter:url(#play-ink);margin-left:auto;align-self:center;padding:.5em .75em;border:2px solid #b8482f;border-radius:16% 12% 15% 13%/13% 16% 12% 15%;color:#b8482f;font-family:'Shippori Mincho B1','Hiragino Mincho ProN',serif;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.08em;text-align:center;white-space:nowrap;transform:rotate(-7deg);opacity:.9;mix-blend-mode:multiply;pointer-events:none}
.play-seal::before{content:'';position:absolute;inset:3px;border:1px solid currentColor;border-radius:inherit;opacity:.5}
.play-seal::after{content:'';position:absolute;inset:-2px;border-radius:inherit;background:radial-gradient(circle at 28% 22%,rgba(250,247,242,.55),transparent 42%),radial-gradient(circle at 78% 76%,rgba(250,247,242,.45),transparent 38%);mix-blend-mode:screen;pointer-events:none}
@media(max-width:800px){.play-seal{font-size:12px;padding:.45em .65em}}
@media(max-width:370px){.play-seal{font-size:11px}}

/* 2. marker: highlighter swipe behind key phrases */
.play-mark{position:relative;display:inline-block;isolation:isolate}
.play-mark svg{position:absolute;left:0;bottom:.02em;width:calc(100% + .22em);height:.5em;z-index:-1;overflow:visible;pointer-events:none}
.play-mark path{fill:none;stroke:var(--light,#e8b7a5);stroke-width:9;stroke-linecap:round;opacity:.85;mix-blend-mode:multiply;stroke-dasharray:1;stroke-dashoffset:1}

/* 4. check: hand-drawn ticks in the audience lists */
html[data-play~="check"] .audience-section .audience-mark::before{display:none}
.play-check{position:absolute;left:-2px;top:-2px;width:17px;height:17px;overflow:visible}
.play-check path{fill:none;stroke:var(--caa-deep-accent,#a04830);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.audience-section .unfit .play-check path{stroke:#8d8072;stroke-width:1.2}

/* 5. price: digits roll up (JS), card lift on hover */
.play-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.play-digits{display:inline-block;white-space:nowrap}
.play-digit{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0;margin:-.12em 0}
.play-digit>span{display:inline-block}
html[data-play~="price"] .pricing-section .pricing-plan{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)}
@media(any-hover:hover) and (pointer:fine){
  html[data-play~="price"] .pricing-section .pricing-plan:hover{transform:translateY(-6px);box-shadow:0 34px 44px -34px rgba(31,27,23,.4)}
}

/* 6. faq: an A. mark flips in at the head of the answer */
html[data-play~="faq"] .faq-section .faq-answer{position:relative}
.play-answer-mark{position:absolute;left:0;top:0;font-family:'Shippori Mincho B1','Hiragino Mincho ProN',serif;font-size:21px;line-height:1.45;color:#a04830;opacity:0;transform:rotateX(90deg) translateY(6px);transform-origin:50% 100%;pointer-events:none}
.faq-section .faq-item[open] .play-answer-mark{opacity:1;transform:none;transition:transform .5s cubic-bezier(.2,.7,.2,1) .08s,opacity .3s ease .08s}
html[data-play~="faq"] .faq-section .faq-item[open] .faq-answer{animation:play-faq-in .45s cubic-bezier(.2,.7,.2,1)}
html[data-play~="faq"] .faq-section .faq-item[open] .faq-toggle{animation:play-pop .38s cubic-bezier(.3,1.6,.4,1)}
@keyframes play-faq-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes play-pop{0%{transform:scale(1)}50%{transform:scale(1.28)}100%{transform:scale(1)}}
@media(max-width:480px){.play-answer-mark{font-size:19px}}

/* 7. magnet: button follows the pointer (JS), threads sway */
html[data-play~="magnet"] .contact-section .contact-cta{transition:background .3s,border-color .3s}
html[data-play~="magnet"] .contact-section .contact-cta:hover{background:#8f3d27;border-color:#8f3d27}
html[data-play~="magnet"] .contact-section .contact-threads g{transform-box:fill-box;transform-origin:70% 45%;animation:play-sway 12s ease-in-out infinite alternate}
@keyframes play-sway{from{transform:rotate(-1deg) translateX(-8px)}to{transform:rotate(1deg) translateX(8px)}}

/* 8. kicker: chapter number rolls up, rule draws in */
.play-num{display:inline-block;overflow:hidden;vertical-align:top}
.play-num>span{display:inline-block;transform:translateY(115%);transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.section-kicker.is-in .play-num>span{transform:none}
html[data-play~="kicker"] .section-kicker::before{transform:scaleX(0);transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.1,1)}
html[data-play~="kicker"] .section-kicker.is-in::before{transform:none}

/* 9. traveler: glowing dot rides the roadmap route */
html[data-play~="traveler"] .method-section .method-list{position:relative}
.play-traveler{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:#f6d9cc;box-shadow:0 0 0 5px rgba(232,183,165,.14),0 0 24px 7px rgba(232,183,165,.55);pointer-events:none;z-index:2}

/* 10. tilt: portrait leans toward the pointer with a soft sheen */
html[data-play~="tilt"] .about-section .about-photo-frame{will-change:transform}
html[data-play~="tilt"] .about-section .about-photo-frame::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.26),transparent 52%);opacity:0;transition:opacity .45s;pointer-events:none}
html[data-play~="tilt"] .about-section .about-photo-frame.is-hot::after{opacity:1}

/* 11. counters: no styles needed */

/* 12. flow: arrows inside sentences */
.play-arrow{display:inline-block}

/* 13. cursor: companion ring (pointer devices only) */
.play-cursor{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border:1.5px solid rgba(196,90,62,.7);border-radius:50%;background:rgba(196,90,62,0);opacity:.9;pointer-events:none;z-index:60;transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),margin .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s,opacity .25s}
.play-cursor.is-active{width:46px;height:46px;margin:-23px 0 0 -23px;background:rgba(196,90,62,.1)}
.play-cursor.is-dark{border-color:rgba(232,183,165,.85)}
.play-cursor.is-dark.is-active{background:rgba(232,183,165,.12)}
.play-cursor.is-hidden{opacity:0}
@media(hover:none),(pointer:coarse){.play-cursor{display:none}}

/* 14. progress: reading line under the sticky nav */
.play-progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--accent,#c45a3e);transform-origin:left center;pointer-events:none}

/* 15. steps: process numbers roll up */
.process-section .play-roll{overflow:hidden}
.process-section .play-roll>span{display:inline-block;transform:translateY(112%);transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.process-section .play-roll.is-in>span{transform:none}
@media(any-hover:hover) and (pointer:fine){
  .process-section .process-step:hover .play-roll.is-in>span{transform:translateY(-5px);transition-delay:0ms!important;transition-duration:.35s}
  html[data-play~="check"] .audience-section .audience-list li>span:last-child{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  html[data-play~="check"] .audience-section .fit .audience-list li:hover>span:last-child{transform:translateX(4px)}
}

@media(prefers-reduced-motion:reduce){
  .play-num>span,html[data-play~="kicker"] .section-kicker::before,.play-answer-mark,html[data-play~="price"] .pricing-section .pricing-plan{transition:none!important}
  .play-num>span,html[data-play~="kicker"] .section-kicker::before,.process-section .play-roll>span{transform:none!important}
  .play-cursor,.play-progress{display:none}
  html[data-play~="magnet"] .contact-section .contact-threads g,html[data-play~="faq"] .faq-section .faq-item[open] .faq-answer,html[data-play~="faq"] .faq-section .faq-item[open] .faq-toggle{animation:none!important}
  .play-mark path,.play-check path{stroke-dashoffset:0}
  .play-traveler{display:none}
}