/* Advance v33 — chapter HUD, section seams, slim progress rail, mobile dock, comfortable touch targets
   and controls that step aside while the visitor reads. */
:root{--adv-gold:var(--tf-champagne,#d8c39a);--adv-cyan:#5ef2ff;--adv-ink:var(--ink,#f1efe8);--adv-muted:var(--muted,#afb3a8);--adv-glass:#0b0f0dd9;--adv-ease:cubic-bezier(.22,.9,.24,1)}

/* ---------- seams: line + chapter tag drawn at the top of each section ---------- */
.adv-seam{position:absolute;left:0;right:0;top:0;height:0;z-index:3;pointer-events:none}
.adv-seam i{position:absolute;left:max(16px,calc((100% - 1160px)/2));right:max(16px,calc((100% - 1160px)/2));top:0;height:1px;background:linear-gradient(90deg,var(--adv-gold),var(--adv-cyan) 60%,transparent);transform-origin:left;transform:scaleX(.18);opacity:.35}
.adv-seam b{position:absolute;left:max(16px,calc((100% - 1160px)/2));top:10px;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--adv-gold);opacity:.55}
.adv-seam.is-drawn i{animation:adv-draw 1.1s var(--adv-ease) both}
.adv-seam.is-drawn b{animation:adv-tag .9s var(--adv-ease) both}
.adv-seam.is-drawn i::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--adv-cyan);box-shadow:0 0 12px 2px #5ef2ffaa;animation:adv-spark 1.1s var(--adv-ease) both}
@keyframes adv-draw{from{transform:scaleX(0);opacity:1}to{transform:scaleX(1);opacity:.35}}
@keyframes adv-tag{from{transform:translateY(8px);opacity:0;letter-spacing:.42em}to{transform:none;opacity:.55;letter-spacing:.18em}}
@keyframes adv-spark{from{left:0;opacity:1}80%{opacity:1}to{left:100%;opacity:0}}
/* the hero, the cinema film and the pinned story already open with their own motion */
#manifesto>.adv-seam,#caminho>.adv-seam{display:none}

/* ---------- HUD ---------- */
.adv-hud{position:fixed;left:50%;bottom:18px;z-index:41;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border:1px solid #ffffff1f;border-radius:999px;background:var(--adv-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--adv-ink);box-shadow:0 12px 30px #0006;transform:translate(-50%,160%);opacity:0;transition:transform .45s var(--adv-ease),opacity .35s ease;max-width:calc(100vw - 32px)}
.adv-hud.is-on{transform:translate(-50%,0);opacity:1}
.adv-ring{position:relative;width:40px;height:40px;flex:0 0 40px}
.adv-ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.adv-ring circle{fill:none;stroke-width:2.5}
.adv-ring-bg{stroke:#ffffff1a}
.adv-ring-fg{stroke:var(--adv-gold);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--adv-ch,0) * 100);stroke-linecap:round;transition:stroke-dashoffset .6s var(--adv-ease)}
.adv-no{position:absolute;inset:0;display:grid;place-items:center;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--adv-gold)}
.adv-text{display:grid;gap:2px;min-width:0}
.adv-count{font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:var(--adv-muted)}
.adv-label{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.adv-next{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 6px 0 4px;border-radius:999px;color:var(--adv-ink);text-decoration:none;font-size:12px;max-width:0;overflow:hidden;opacity:0;white-space:nowrap;transition:max-width .45s var(--adv-ease),opacity .3s ease,padding .3s}
.adv-next-k{color:var(--adv-muted)}
.adv-next-label{font-style:normal;font-weight:600;color:var(--adv-gold)}
.adv-arrow{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--adv-gold);color:#0b0c0c;font-size:13px;transition:transform .25s ease}
.adv-hud.is-open .adv-next,.adv-hud:hover .adv-next,.adv-hud:focus-within .adv-next{max-width:260px;opacity:1;padding:0 4px 0 10px}
.adv-next:hover .adv-arrow{transform:translateY(2px)}
.adv-next:focus-visible{outline:2px solid var(--adv-cyan);outline-offset:2px}
.adv-hud.is-pulse .adv-ring{animation:adv-pulse .7s var(--adv-ease)}
@keyframes adv-pulse{40%{transform:scale(1.14)}}

/* ---------- slim progress rail (desktop) ---------- */
@media (min-width:1200px){
  .motion-progress{right:16px;padding:10px 0;gap:0;background:none!important;border:0!important;border-radius:0}
  .motion-progress::before,.motion-progress::after{content:"";position:absolute;right:2px;top:22px;width:1px}
  .motion-progress::before{bottom:22px;background:#ffffff1c}
  .motion-progress::after{height:calc((100% - 44px) * var(--adv-rail,0));background:linear-gradient(var(--adv-gold),var(--adv-cyan));transition:height .6s var(--adv-ease)}
  .motion-progress a{position:relative;flex-direction:row-reverse;justify-content:flex-start;min-height:24px;padding-right:0;font-size:0;gap:10px}
  .motion-progress a::before{width:5px!important;height:5px!important;position:relative;z-index:1;transition:transform .3s,background-color .3s,box-shadow .3s}
  .motion-progress a.adv-passed::before{background:var(--adv-gold)!important}
  .motion-progress a[aria-current]::before{transform:scale(1.8);background:var(--adv-cyan)!important;box-shadow:0 0 10px #5ef2ff99}
  .motion-progress a:hover,.motion-progress a:focus-visible,.motion-progress a[aria-current]{font-size:10px}
  .motion-progress a:hover,.motion-progress a:focus-visible{color:var(--adv-ink)}
}

/* ---------- controls step aside while reading ---------- */
.experience-controls,.floating-cta{transition:transform .4s var(--adv-ease),opacity .25s ease,visibility .25s}
html.adv-hide .experience-controls{transform:translateY(170%)}
html.adv-hide .floating-cta{transform:translateY(170%)}
html.adv-hide .adv-hud.is-on{transform:translate(-50%,170%)}

/* ---------- comfortable touch targets ---------- */
@media (pointer:coarse),(max-width:1023px){
  .brand{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px}
  .explore,.story-skip,.lift-skip,.social-skip,a.text-link,.photo-expand,.small-button,#next-scene,.story-nav a,.profile-open{display:inline-flex;align-items:center;min-height:44px}
  .hero-photo-buttons button{min-width:44px;min-height:44px}
  .experience-controls button,.experience-controls>a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .story-nav a{min-width:44px;justify-content:center}
  .site-header nav a{display:inline-flex;align-items:center;min-height:44px}
  .instagram-account header a{display:inline-flex;align-items:center;min-height:40px}
}
/* touch tablets have no hover to open the HUD, so its "next" stays open */
@media (pointer:coarse) and (min-width:768px){
  .adv-next{max-width:260px;opacity:1;padding:0 4px 0 10px}
}
/* the rail stays a thin line: labels grow to the left instead of widening the hit area */
@media (min-width:1200px){
  .motion-progress{width:18px}
  .motion-progress a{width:18px;white-space:nowrap;overflow:visible}
}

/* ---------- tablet: keep the three fixed pieces from colliding ---------- */
@media (min-width:768px) and (max-width:1199px){
  .adv-label{max-width:120px}
  .experience-controls span{display:none}
}

/* ---------- phone: one dock for controls, chapter and CTA ---------- */
@media (max-width:767px){
  .adv-dock{position:fixed;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));z-index:38;background:linear-gradient(180deg,#0a0d0bd6,#0a0d0bf5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid #ffffff14;transform:translateY(105%);transition:transform .4s var(--adv-ease)}
  .adv-dock.is-on{transform:none}
  .adv-dock::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;transform-origin:left;transform:scaleX(var(--adv-p,0));background:linear-gradient(90deg,var(--adv-gold),var(--adv-cyan))}
  html.adv-hide .adv-dock.is-on{transform:translateY(105%)}
  .experience-controls{left:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;z-index:42}
  .floating-cta{right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;z-index:42}
  .adv-hud{left:118px;bottom:calc(10px + env(safe-area-inset-bottom));padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:translateY(160%)}
  .adv-hud.is-on{transform:none}
  html.adv-hide .adv-hud.is-on{transform:translateY(170%)}
  .adv-ring{width:44px;height:44px;flex-basis:44px}
  .adv-ring svg{width:44px;height:44px}
  .adv-text{display:none}
  .adv-next{position:absolute;inset:0;max-width:none!important;opacity:1!important;padding:0!important;font-size:0}
  .adv-next>*{display:none}
  .adv-seam b{top:8px;font-size:9px}
  footer{padding-bottom:96px!important}
}

@media (prefers-reduced-motion:reduce){
  .adv-seam i,.adv-seam b,.adv-seam i::after,.adv-hud,.adv-dock,.adv-ring-fg,.adv-next,.experience-controls,.floating-cta{animation:none!important;transition:none!important}
  .adv-seam i{transform:scaleX(1)}
}