/* =====================================================================
   FUNDO MARAJOARA (9 nov 2026) — approved by Fabricio, intensity "Médio" (.16).
   Original drawing inspired by Marajoara ceramics (draft — to be replaced by the family's design).
   Sits behind the glass panels, above the water photo. The opening video is unchanged.
   To go back: remove the fundo.css link and the fundo.js script from index.html.
   ===================================================================== */
body.v2 .maraj{--op:.16;--cream:#ddcfb4;--terra:#c8774a;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
body.v2 .maraj .tile{position:absolute;inset:-240px;background-image:var(--tile);background-size:240px 240px;opacity:var(--op);
 animation:maraj-drift 90s linear infinite;will-change:transform;
 -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 18%,#000 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 18%,#000 75%)}
@keyframes maraj-drift{to{transform:translate(240px,240px)}}
body.v2 .maraj .glow{position:absolute;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,204,51,.10),transparent 60%);
 top:-20vmax;left:-20vmax;animation:maraj-glow 26s ease-in-out infinite alternate;will-change:transform}
@keyframes maraj-glow{to{transform:translate(70vw,60vh)}}
body.v2 .maraj .band{position:absolute;left:0;width:100%;height:44px;opacity:calc(var(--op) * 2.4)}
body.v2 .maraj .band.top{top:28px}
body.v2 .maraj .band.bottom{bottom:28px;transform:scaleY(-1)}
body.v2 .maraj .band path{fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:square;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:maraj-draw 9s ease-out forwards}
body.v2 .maraj .band path.b{stroke:var(--terra);animation-delay:1.2s}
@keyframes maraj-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){body.v2 .maraj .tile,body.v2 .maraj .glow{animation:none}body.v2 .maraj .band path{animation:none;stroke-dashoffset:0}}

/* FAIXA MARAJOARA (9 nov) — version E: words + vase border between them + a thin vase rim above and below (faixa.js) */
body.v2 .kinetic .k-art{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:0 clamp(10px,1.4vw,22px)}
body.v2 .kinetic .k-mid svg{display:block;height:clamp(52px,6.6vw,104px);width:auto}
body.v2 .kinetic:has(.k-mid){padding:clamp(34px,4.4vh,52px) 0}
body.v2 .kinetic:has(.k-mid)::before,body.v2 .kinetic:has(.k-mid)::after{content:"";position:absolute;left:0;right:0;height:14px;background:var(--bm-rim) repeat-x 0 0/56px 14px;opacity:.85;pointer-events:none}
body.v2 .kinetic:has(.k-mid)::before{top:10px}
body.v2 .kinetic:has(.k-mid)::after{bottom:10px;transform:scaleY(-1)}
@media(max-width:700px){body.v2 .kinetic .k-mid svg{height:46px}body.v2 .kinetic:has(.k-mid){padding:30px 0}}
/* every word stays readable in every repeat of the band (an old "outline" rule hid some of them) */
body.v2 .kinetic .k-a .k-word:not(.k-it){color:var(--ink);-webkit-text-stroke:0}
body.v2 .kinetic .k-a .k-word.k-it{color:var(--soft,#aeb2b8);-webkit-text-stroke:0}

/* BARRAS FLUTUANTES (9 nov) — the vase rim of the band runs the full length of the menu bar, in its own strip above
   and below the buttons (the bar is a little taller so the rim never touches DE, Menu or Booking).
   The sound pill gets it over the "Sound off" part only. */
body.v2 .v2-header,body.v2 .v2-header.is-solid{padding-top:13px;padding-bottom:13px;min-height:68px}
body.v2 .v2-header::before,body.v2 .v2-header::after,
body.v2 .hero-controls::before,body.v2 .hero-controls::after{content:"";position:absolute;left:30px;right:30px;height:7px;z-index:-1;pointer-events:none;
 background:var(--bm-rim) repeat-x 0 0/28px 7px;opacity:.6;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
body.v2 .v2-header::before{top:3px;transform:scaleY(-1)}
body.v2 .v2-header::after{bottom:3px}
body.v2 .hero-controls::before,body.v2 .hero-controls::after{left:12px;right:60px;height:6px;background-size:24px 6px;opacity:.5;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
body.v2 .hero-controls::before{top:2px;transform:scaleY(-1)}body.v2 .hero-controls::after{bottom:2px}
@media(max-width:700px){
 body.v2 .v2-header,body.v2 .v2-header.is-solid{padding-top:11px;padding-bottom:11px;min-height:62px}
 body.v2 .v2-header::before,body.v2 .v2-header::after{left:24px;right:24px;height:6px;background-size:24px 6px}
 body.v2 .v2-header::before{top:2px}body.v2 .v2-header::after{bottom:2px}
 body.v2 .hero-controls::before,body.v2 .hero-controls::after{display:none}}

/* NOME (9 nov) — the hover effect wraps letters in spans; the old ".brand span" rule (8–10px, +2px, margin 7px) leaked onto them:
   on desktop the name shrank after load and sat 7px low. The letters now inherit the name's own size and spacing. */
body.v2 .brand .lw,body.v2 .brand .lt{font-size:inherit;letter-spacing:inherit;font-weight:inherit;margin-top:0;vertical-align:baseline}

/* RODAPÉ (9 nov) — bottom band fades out over the footer; footer link underline sits right under the words */
body.v2 .maraj .band.bottom{transition:opacity .5s}
body.v2 .maraj.at-end .band.bottom{opacity:0}
body.v2 .v2-footer a{background-position:0 74%}

/* CARDS SEM CORTE (9 nov) — ZDF, Swisscom, High Peak, Commercial stay uncropped; the bars show a blurred, dark copy of the picture */
body.v2 .work-card.amb .media-button::before{content:"";position:absolute;inset:-30px;z-index:0;pointer-events:none;
 background:#0d0d0d var(--amb) center/cover no-repeat;filter:blur(26px) brightness(.42) saturate(1.15)}
body.v2 .work-card.amb .media-button img,
body.v2 .work-card.amb .scroll-preview{background:transparent}
body.v2 .work-card.amb .media-button.preview-playing>img{opacity:0}
body.v2 .work-card.amb .media-button::before{filter:blur(26px) brightness(.55) saturate(1.2)}
/* the bar is taller now: the sound pill moves down to keep the same gap */
@media(max-width:700px){body.v2 .hero-controls{top:84px}}
@media(orientation:landscape) and (max-height:520px){body.v2 .hero-controls{top:92px}}


/* 50 MIL (9 nov, opção C escolhida pelo Fabricio) — Swisscom card: golden "50,000" + live audience, Letzigrund Stadium, Zurich */
body.v2 .has-stat .card-stat{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;display:flex;align-items:flex-end;gap:16px;
 padding:80px 24px 20px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#f3f3f1}
body.v2 .has-stat .card-stat b{font:800 clamp(44px,5vw,72px)/.85 "Schibsted Grotesk",Arial,sans-serif;letter-spacing:-.04em;color:#ffcc33}
body.v2 .has-stat .card-stat i{font:500 11px/1.5 "Chivo Mono",ui-monospace,monospace;font-style:normal;letter-spacing:.12em;text-transform:uppercase;padding-bottom:4px}
body.v2 .has-stat .card-stat i span{display:block}
body.v2 .has-stat .media-action{display:none}
@media(max-width:700px){body.v2 .has-stat .card-stat{flex-direction:column;align-items:flex-start;gap:8px;padding:60px 18px 16px}
 body.v2 .has-stat .card-stat b{font-size:46px}body.v2 .has-stat .card-stat i{font-size:10px}}
/* same blurred fill when the film plays inside the card (inline player) — no black side bars */
body.v2 .work-card.amb .film::before{content:"";position:absolute;inset:-30px;z-index:0;pointer-events:none;
 background:#0d0d0d var(--amb) center/cover no-repeat;filter:blur(26px) brightness(.55) saturate(1.2)}
body.v2 .work-card.amb .film .film-video{background:transparent}
body.v2 .work-card.amb .film.is-full .film-video{background:transparent}

/* SELECTED WORK (9 nov) — every major work as an equal card (no gold on one item); hover pops the card,
   click scrolls to that work's video card in the Work section and makes it glow briefly */
body.v2 .af-list--go{display:grid;gap:8px}
body.v2 .af-list--go li,body.v2 .af-list--go li+li{display:block;padding:0;border:0}
body.v2 .af-list--go li:first-child strong{color:var(--ink)}
body.v2 .af-row{position:relative;display:flex;flex-direction:column;gap:3px;padding:13px 52px 13px 16px;border-radius:14px;
 background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);color:inherit;text-decoration:none;
 transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s,border-color .3s,box-shadow .35s}
body.v2 .af-row strong{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
body.v2 .af-row span{font-size:13px;color:var(--soft,#a3a8af);line-height:1.4}
body.v2 .af-go{position:absolute;right:14px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;display:grid;place-items:center;
 border:1px solid rgba(255,255,255,.18);transition:background-color .3s,border-color .3s,transform .35s}
body.v2 .af-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
body.v2 a.af-row:focus-visible{outline:2px solid #ffcc33;outline-offset:2px}
@media(hover:hover){
 body.v2 a.af-row:hover{transform:translateY(-3px) scale(1.012);background:rgba(255,255,255,.07);border-color:rgba(255,204,51,.45);box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
 body.v2 a.af-row:hover .af-go{background:#ffcc33;border-color:#ffcc33;color:#111;transform:rotate(45deg)}}
body.v2 a.af-row:active{transform:scale(.99)}
body.v2 .work-card.goto-flash{animation:goto-flash 1.8s ease-out}
@keyframes goto-flash{0%,30%{box-shadow:0 0 0 2px #ffcc33,0 0 60px -10px rgba(255,204,51,.6);border-radius:18px}100%{box-shadow:0 0 0 2px rgba(255,204,51,0),0 0 60px -10px rgba(255,204,51,0)}}
@media(max-width:700px){body.v2 .af-row{padding:12px 48px 12px 14px}body.v2 .af-row strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){body.v2 .af-row,body.v2 .af-go{transition:none}body.v2 .work-card.goto-flash{animation:none;outline:2px solid #ffcc33}}

/* NOMES NOS CRÉDITOS (9 nov) — famous / reference names stand out: bolder, a touch larger, bright white */
body.v2 b.nm{font-family:"Schibsted Grotesk",Arial,sans-serif;font-weight:700;font-size:1.1em;letter-spacing:-.005em;color:var(--ink,#f3f3f1)}

/* MENU MARAJOARA (9 nov) — open menu filled with the Marajoara art: pattern, vase-rim frame on the edges, medallion.
   The frame sits on the very edge and the menu content gets inner margins, so nothing touches the text. */
body.v2 .site-menu{isolation:isolate}
body.v2 .sm-art{position:absolute;top:0;left:0;right:0;min-height:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden}
body.v2 .sm-tile{position:absolute;inset:0;background:var(--tile) 0 0/220px 220px;opacity:.16;
 -webkit-mask-image:radial-gradient(120% 80% at 30% 45%,rgba(0,0,0,.3),#000 80%);mask-image:radial-gradient(120% 80% at 30% 45%,rgba(0,0,0,.3),#000 80%)}
body.v2 .sm-b{position:absolute;left:6px;right:6px;height:14px;background:var(--bm-rim) repeat-x 0 0/56px 14px;opacity:.75}
body.v2 .sm-b-t{top:84px;transform:scaleY(-1)}
body.v2 .sm-b-b{bottom:6px}
body.v2 .sm-v{position:absolute;top:84px;bottom:6px;width:14px;background:var(--bm-rim-v) repeat-y 0 0/14px 56px;opacity:.55}
body.v2 .sm-v-l{left:6px}body.v2 .sm-v-r{right:6px;transform:scaleX(-1)}
body.v2 .sm-art svg{display:block;width:100%;height:auto}
body.v2 .sm-med{position:absolute;width:min(70vw,290px);right:-22%;bottom:16%;opacity:.17;animation:sm-spin 90s linear infinite}
body.v2 .sm-dia,body.v2 .sm-twin{display:none}
@keyframes sm-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body.v2 .sm-med{animation:none}}
body.v2 .site-menu .sm-inner{padding-left:calc(var(--pad) + 18px);padding-right:calc(var(--pad) + 18px);padding-top:112px;padding-bottom:calc(36px + env(safe-area-inset-bottom))}
body.v2 .site-menu .sm-inner{position:relative;isolation:isolate}
body.v2 .sm-inner>.sm-art{top:0;bottom:0;height:auto;min-height:100%}