/* Marzul · acabamento e movimento.
   Camada sobre styles.css + reference.css + world.css: alinha o texto num só esquadro,
   corrige contraste e dá vida às seções. Os estados iniciais das animações só valem com
   html.m-pre (posto no <head>) e somem com prefers-reduced-motion. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.33,1,.68,1)}

/* ---------- Superfícies do navegador ---------- */
::selection{background:#ffd08a;color:#052a38}
:focus-visible{outline:3px solid #f59725;outline-offset:3px;border-radius:8px}
input[type=range]{accent-color:#0e7f86}
html{scrollbar-color:#0e7f86 #f6ecd8}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:#f6ecd8}::-webkit-scrollbar-thumb{background:#0e7f86;border-radius:999px;border:3px solid #f6ecd8}

/* ---------- Navegação: marca com nome ---------- */
.nav .brand-word{display:inline;margin-left:.7vw;font-weight:800;letter-spacing:.14em;font-size:clamp(13px,1.15vw,18px);color:#062d3b}
.nav nav a{position:relative}
.nav nav a:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#f59725;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav nav a:hover:after,.nav nav a[aria-current]:after{transform:scaleX(1)}

/* ---------- Hero: um esquadro só ---------- */
.hero-copy{isolation:isolate}
.hero-copy:before{content:'';position:absolute;inset:-2.6vw -5vw -2.4vw -4vw;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 58% at 38% 48%,#fff8e8e6,#fff8e899 48%,transparent 74%);filter:blur(6px)}
.hero .eyebrow{margin:0 0 .9vw}
.hero h1{letter-spacing:-.04em;line-height:.94}
.hero-copy>p:not(.eyebrow){margin:1.2vw 0 0;max-width:27vw;font-size:clamp(13px,1.12vw,19px);line-height:1.5;color:#123a44;text-wrap:pretty}
.hero .actions{margin:1.7vw 0 0}
.hero .actions .btn,.hero .text-link{position:relative;overflow:hidden}
@media(max-width:1000px) and (min-width:761px){.hero-copy>p:not(.eyebrow){max-width:300px;font-size:12px}}

/* brilho que atravessa os botões principais */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,#fff6 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.btn:hover:before{transform:translateX(120%)}

/* cartões do píer: luz que segue o cursor */
.pillar-dock>a{position:relative;overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.pillar-dock>a:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),#ffffffd0,transparent 70%)}
.pillar-dock>a:hover{transform:translateY(-6px);box-shadow:0 18px 34px #0e5d6a2e}
.pillar-dock>a:hover:before{opacity:1}
.pillar-dock>a img{transition:transform .6s var(--ease-out)}
.pillar-dock>a:hover img{transform:translateY(-4px) rotate(-5deg) scale(1.08)}
.pillar-dock>a b{transition:background .3s,color .3s,transform .4s var(--ease-out)}
.pillar-dock>a:hover b{background:#f59725;color:#fff;transform:translateX(3px)}

/* ---------- Títulos: sublinhado de onda que se desenha ---------- */
.section-head h2 em,.community h2 em,.faq h2 em,.closing h2 em{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c10-6 20-6 29 0s20 6 29 0 20-6 29 0 20 6 29 0' fill='none' stroke='%23f59725' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 100%;background-size:0 .2em;padding-bottom:.12em;transition:background-size 1.3s var(--ease-out) .25s}
.in-view h2 em,.section-head.visible h2 em{background-size:100% .2em}
.closing h2 em,.community h2 em,.demo-section h2 em{filter:none}

/* ---------- Abas de indicação (estavam quebradas) ---------- */
.community-tabs{gap:4px}
.community-tabs button{appearance:none;border:0;background:transparent;font:inherit;font-weight:700;font-size:15px;padding:10px 18px;border-radius:10px;cursor:pointer;color:#e2f3e7;transition:background .35s var(--ease-out),color .35s,transform .35s var(--ease-out)}
.community-tabs button:hover{background:#ffffff1f}
.community-tabs button.active{background:#fff2d7;color:#0f4a56;box-shadow:0 6px 16px #00182a40}
.community-copy>h3{margin-top:26px}

/* ---------- Jornada: legenda alinhada ao traçado ---------- */
.route-caption{left:18%;top:20px}
.journey-step{position:relative;overflow:hidden}
.journey-detail{transition:box-shadow .4s}
.journey-detail.swap>div,.journey-detail.swap .journey-meta{animation:swap-in .6s var(--ease-out)}
.journey-meta{align-self:center;white-space:nowrap}
@keyframes swap-in{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}

/* ---------- Criaturas: nadando de verdade ---------- */
.creatures-row>img:nth-of-type(1){animation:whale-swim 14s ease-in-out infinite}
.creatures-row>img:nth-of-type(2){animation:octo-float 6s ease-in-out infinite;transform-origin:50% 30%}
@keyframes whale-swim{0%,100%{transform:translate(-30px,6px) rotate(-3deg)}50%{transform:translate(40px,-14px) rotate(3deg)}}
@keyframes octo-float{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-18px) scale(.97,1.04)}70%{transform:translateY(-6px) scale(1.03,.97)}}

/* ---------- Estaleiro e demo: o barco boia ---------- */
.blueprint>img{animation:bob 4.6s ease-in-out infinite}
.pin{transition:transform .35s var(--ease-out),background .3s,color .3s}
.pin:hover{transform:translateY(-3px)}
.pin.active{box-shadow:0 0 0 0 #0e7f8680;animation:pin-ping 2.2s var(--ease-out) infinite}
.part-copy.swap>*{animation:swap-in .55s var(--ease-out) both}
.part-copy.swap>*:nth-child(2){animation-delay:.05s}.part-copy.swap>*:nth-child(3){animation-delay:.1s}.part-copy.swap>*:nth-child(4){animation-delay:.15s}
.demo-boat{transition:left 1.6s var(--ease-soft),filter .5s;animation:bob 3.8s ease-in-out infinite}
.demo-boat.swap{animation:boat-pop .7s var(--ease-out),bob 3.8s ease-in-out .7s infinite}
.creature{animation:creature-swim 9s ease-in-out infinite}
.rarities button{transition:transform .35s var(--ease-out),background .3s,color .3s,box-shadow .3s}
.rarities button:hover{transform:translateY(-3px)}
.rarities button.active{box-shadow:0 8px 18px #0e7f8640}
.cycle-steps span{position:relative;transition:color .4s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-9px) rotate(.8deg)}}
@keyframes boat-pop{0%{transform:translateY(16px) scale(.92);filter:brightness(1.6) blur(3px);opacity:.2}100%{transform:none;filter:none;opacity:1}}
@keyframes creature-swim{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(-36px,-10px) rotate(3deg)}}
@keyframes pin-ping{0%{box-shadow:0 0 0 0 #0e7f8670}100%{box-shadow:0 0 0 16px #0e7f8600}}

/* ---------- Economia: o resultado reage ---------- */
#reward{display:inline-block}
#reward.bump{animation:bump .5s var(--ease-out)}
@keyframes bump{0%{transform:scale(.92);filter:blur(2px)}60%{transform:scale(1.04)}100%{transform:none;filter:none}}

.economy-flow article{transition:transform .5s var(--ease-out),box-shadow .5s}
.economy-flow article:hover{transform:translateY(-6px);box-shadow:0 22px 40px #85592022}

/* ---------- Comunidade: barras crescem ---------- */
.ref-graph span{transform-origin:bottom;transition:transform 1.1s var(--ease-out)}
.m-pre .ref-panel:not(.in-view) .ref-graph span{transform:scaleY(0)}
.ref-graph span:nth-child(2){transition-delay:.1s}.ref-graph span:nth-child(3){transition-delay:.2s}.ref-graph span:nth-child(4){transition-delay:.3s}

/* ---------- FAQ: abre com suavidade ---------- */
.questions summary{cursor:pointer;transition:color .3s}
.questions summary:hover{color:#0e7f86}
.questions details[open]>p{animation:swap-in .5s var(--ease-out)}

/* ---------- Fechamento: título legível sobre a arte ---------- */
.closing{position:relative;isolation:isolate}
.closing:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 46% 60% at 50% 52%,#03283ecc,#03283e66 55%,transparent 80%)}
.closing h2{text-shadow:0 4px 24px #001b2b80}

/* ---------- Entradas (só com JS e sem movimento reduzido) ---------- */
@media(prefers-reduced-motion:no-preference){
  .m-pre .hero-art{scale:1.07;filter:saturate(.75) blur(5px)}
  .m-go .hero-art{scale:1;filter:none;transition:scale 2.2s var(--ease-out),filter 1.4s var(--ease-out)}
  .hero h1 .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
  .hero h1 .line>span{display:block}
  .m-pre .hero h1 .line>span{transform:translateY(108%) rotate(3deg)}
  .m-go .hero h1 .line>span{transform:none;transition:transform 1.2s var(--ease-out);transition-delay:calc(.25s + var(--i) * .12s)}
  .m-pre .hero .eyebrow,.m-pre .hero-copy>p:not(.eyebrow),.m-pre .hero .actions>*{opacity:0;transform:translateY(16px);filter:blur(6px)}
  .m-go .hero .eyebrow,.m-go .hero-copy>p:not(.eyebrow),.m-go .hero .actions>*{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
  .m-go .hero .eyebrow{transition-delay:.15s}.m-go .hero-copy>p:not(.eyebrow){transition-delay:.7s}
  .m-go .hero .actions>*:nth-child(1){transition-delay:.85s}.m-go .hero .actions>*:nth-child(2){transition-delay:.95s}
  .m-pre .pillar-dock>a{opacity:0;translate:0 40px}
  .m-go .pillar-dock>a{opacity:1;translate:0 0;transition:opacity .9s var(--ease-out),translate 1.1s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease-out);transition-delay:calc(1s + var(--i) * .09s),calc(1s + var(--i) * .09s),0s,0s}

  /* grupos que entram em cascata */
  .m-pre [data-stagger]>*{opacity:0;translate:0 28px;filter:blur(5px)}
  .m-pre [data-stagger].in-view>*{opacity:1;translate:0 0;filter:none;transition:opacity .8s var(--ease-out),translate 1s var(--ease-out),filter .8s var(--ease-out);transition-delay:calc(var(--i) * 80ms)}
  /* blocos grandes entram com máscara de baixo para cima */
  .m-pre [data-wipe]{clip-path:inset(18% 0 0 0 round 28px);opacity:0;translate:0 40px}
  .m-pre [data-wipe].in-view{clip-path:inset(0 0 0 0 round 28px);opacity:1;translate:0 0;transition:clip-path 1.3s var(--ease-out),opacity .8s var(--ease-out),translate 1.3s var(--ease-out)}
}
/* botão "Pausar movimento" também congela as novas animações */
.paused .creatures-row>img,.paused .blueprint>img,.paused .demo-boat,.paused .creature,.paused .pin.active{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .creatures-row>img,.blueprint>img,.demo-boat,.creature,.pin.active{animation:none!important}
  .section-head h2 em,.community h2 em,.faq h2 em,.closing h2 em{background-size:100% .2em;transition:none}
}

/* ---------- Celular ---------- */
@media(max-width:760px){
  .nav .brand-word{font-size:18px;margin-left:9px}
  .hero-copy:before{inset:-18px -14px -22px;background:radial-gradient(ellipse 70% 62% at 50% 50%,#fff8e8f2,#fff8e8c4 55%,transparent 80%)}
  .hero-copy>p:not(.eyebrow){max-width:300px;margin:12px auto 0;font-size:14px;color:#0e2f38;font-weight:500}
  .hero .actions{margin:18px 0 0;justify-content:center}
  .community-tabs button{font-size:14px;padding:9px 14px}
  .journey-meta{white-space:normal}
  .route-caption{display:none}
  .closing:before{background:radial-gradient(ellipse 90% 60% at 50% 50%,#03283ed9,#03283e66 60%,transparent 85%)}
}