/* ===== Refinements: motion, arrows, selects, section transitions, rhythm ===== */

/* ---------- Motion (calm & subtle) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pagein{from{opacity:0}to{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes flash{from{background:rgba(245,166,35,.16)}to{background:transparent}}
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
body{animation:pagein .5s ease both}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.card.reveal.in{transition:opacity .8s var(--ease) var(--d,0ms),transform .35s var(--ease),box-shadow .3s,border-color .3s,background-color .3s}

/* ---------- Arrows (SVG mask, RTL-aware) ---------- */
:root{--arr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");--flip:1;--nudge:4px}
[dir=rtl]{--flip:-1}
.more::after,.btn.arrow::after,.hero-search .btn::after,.cta .btn::after,.foot-top .btn::after{content:"";width:1.05em;height:1.05em;background:currentColor;-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat;transform:scaleX(var(--flip));transition:transform .3s var(--ease);flex:none}
.more:hover::after,.btn:hover::after{transform:translateX(calc(var(--flip) * var(--nudge))) scaleX(var(--flip))}
.more{gap:8px;padding-top:6px}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}

/* ---------- Card hover: see motion.css ---------- */
.pill:active{transform:scale(.95)}
.fav[aria-pressed=true] svg{animation:pop .45s var(--ease)}
.eyebrow::before{animation:pulse 2.4s ease-in-out infinite}

/* ---------- Selects (custom chevron, theme-aware) ---------- */
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:46px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B8174' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-size:18px;background-position:left 16px center}
[dir=ltr] .field select{background-position:right 16px center}
:root[data-theme=dark] .field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238BA699' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")}
.field select:hover{border-color:var(--brand)}
select option{background:var(--surface);color:var(--text)}
.field textarea{resize:vertical;min-height:110px}

/* ---------- Lists ---------- */
.checklist{list-style:none;padding:0;display:grid;gap:12px;color:var(--text-2)}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.checklist li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--brand-soft) center/12px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D5E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>")}
.checklist.bad li::before{background:rgba(214,69,93,.12) center/10px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6455d' stroke-width='3.4' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>")}
.tagline{font-family:var(--font-en);font-weight:800;font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:.02em;color:var(--brand-strong)}

/* ---------- Rhythm: headings, text and buttons ---------- */
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:14px;line-height:1.85}
.cta .row{gap:14px}
.cta .btn{min-width:170px}
.field{margin-bottom:20px}
.panel .btn[type=submit]{margin-top:6px}

/* ---------- Soft section transitions (no hard cuts) ---------- */
.section{padding:104px 0}
.section.tight{padding:72px 0}
.section.alt{border:0;background:var(--bg-2)}
.section.alt,.section.dark{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 84px,#000 calc(100% - 84px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 84px,#000 calc(100% - 84px),transparent 100%)}
.hero{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 100px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 100px),transparent);padding-bottom:20px}
.hero-grid{padding-bottom:112px}
.marquee{border:0;background:transparent;margin-top:-28px;position:relative}
.page-hero{padding:80px 0 92px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent)}
@media (max-width:640px){.section{padding:72px 0}.hero-grid{padding-bottom:88px}}

/* ---------- Hero: gentle entrance ---------- */
.hero-grid>div:first-child>*{animation:rise .9s var(--ease) both}
.hero-grid>div:first-child>:nth-child(1){animation-delay:.1s}
.hero-grid>div:first-child>:nth-child(2){animation-delay:.2s}
.hero-grid>div:first-child>:nth-child(3){animation-delay:.3s}
.hero-grid>div:first-child>:nth-child(4){animation-delay:.4s}
.hero-grid>div:first-child>:nth-child(5){animation-delay:.5s}
.hero-grid>div:first-child>:nth-child(6){animation-delay:.6s}
.hero h1 em::after{transform-origin:left;animation:draw 1s .9s var(--ease) both}
[dir=rtl] .hero h1 em::after{transform-origin:right}
.slider{animation:rise 1s .25s var(--ease) both}
.float-chip{animation:floaty 6s ease-in-out infinite}
.fc-2{animation-delay:-3s}
.slide.active.slide-photo img{animation:kenburns 7s ease-out both}
.slide.active .mock,.slide.active .node{animation:rise .7s var(--ease) both}
.slide.active .mock:nth-child(2),.slide.active .node:nth-child(2){animation-delay:.12s}
.slide.active .node:nth-child(3){animation-delay:.24s}
.slide.active .node:nth-child(4){animation-delay:.36s}
.marquee-track{animation-duration:46s}

/* ---------- Prompt box: mobile & polish ---------- */
.pbox-bar .title{font-weight:700;color:#d3def2}
.pbox-out.flash{animation:flash .6s ease-out}
.tbtn:hover{transform:translateY(-1px)}
.tbtn:active{transform:scale(.95)}
@media (max-width:560px){
  .pbox-bar{padding:10px 12px}
  .pbox-bar .dots3,.pbox-bar .grow{display:none}
  .pbox-bar .title{flex:1;min-width:0}
  .tbtn{width:38px;height:38px;padding:0;justify-content:center;border-radius:12px}
  .tbtn span[data-i18n]{display:none}
  .tbtn svg{width:18px;height:18px}
  .pbox-out{padding:16px;font-size:.95rem;line-height:1.9;height:300px}
  .pbox-foot{padding:12px;gap:8px}
  .pbox-foot .btn{flex:1;min-width:0;padding:10px 12px}
  .pbox-foot .spacer{display:none}
  .pbox-foot #tok{width:100%;text-align:center;font-size:.8rem}
  .pbox.expanded{inset:0;border-radius:0}
  .panel{padding:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}