@property --intro-progress { syntax: '<number>'; inherits: false; initial-value: 0; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: experience-page-out .26s ease both; }
::view-transition-new(root) { animation: experience-page-in .42s .08s ease both; }
@keyframes experience-page-out { to { opacity: 0; transform: translateX(-2%); } }
@keyframes experience-page-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }

html[data-experience='active'] { --scroll-direction: 1; }
.experience-intro { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden; background: #000; color: #ffde00; transition: opacity .36s ease, visibility .36s ease; }
.experience-intro::after { content: ''; position: absolute; inset: 0; z-index: 3; background: #ffde00; transform: scaleY(0); transform-origin: center; pointer-events: none; }
.experience-intro.is-curtain::after { animation: experience-curtain .3s cubic-bezier(.75,0,.25,1) both; }
.experience-intro.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.experience-blueprint { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(#dadada22 1px,transparent 1px),linear-gradient(90deg,#dadada22 1px,transparent 1px); background-size: 42px 42px; transform: perspective(700px) rotateX(58deg) scale(1.8); transform-origin: center bottom; }
.experience-lockup { position: relative; width: min(42vw,230px); filter: drop-shadow(0 0 22px #ffde0033); }
.experience-lockup svg { display: block; width: 100%; overflow: visible; }
.experience-lockup path { stroke: none; transform-box: fill-box; transform-origin: center; }
.experience-square { fill: #ffde00; clip-path: inset(0 100% 0 0); animation: experience-logo-reveal 1.2s cubic-bezier(.65,0,.35,1) forwards; }
.experience-v { fill: #fff; opacity: 0; animation: experience-logo-settle .6s 1.05s ease-out forwards; }
.experience-slab { fill: #fff; opacity: 0; transform: translateX(35px); animation: experience-logo-slab .5s 1.65s ease-out forwards; }
@keyframes experience-logo-reveal { to { clip-path: inset(0); } }
@keyframes experience-logo-settle { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:none; } }
@keyframes experience-logo-slab { to { opacity:1; transform:none; } }
.experience-progress { position: absolute; bottom: 8vh; width: min(360px,72vw); display: grid; gap: 10px; font: 700 1rem/1 monospace; letter-spacing: .15em; }
.experience-progress i { height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left; }
@keyframes experience-draw { to { stroke-dashoffset: 0; } }
@keyframes experience-settle { from { transform: translateY(-10px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes experience-curtain { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); clip-path: inset(50% 0); } }

.experience-cursor { position: fixed; left: -7px; top: -7px; z-index: 9998; width: 14px; height: 14px; pointer-events: none; background: #ffde00; mix-blend-mode: difference; transition: width .16s ease,height .16s ease,border-radius .16s ease; }
.experience-cursor.is-active { width: 28px; height: 28px; border-radius: 50%; }
.experience-cursor[data-label]:not([data-label=''])::after { content: attr(data-label); position: absolute; left: 34px; top: 4px; padding: 5px 7px; background: #ffde00; color: #000; font: 700 10px/1 sans-serif; letter-spacing: .08em; mix-blend-mode: normal; }
.button,.header-cta { transform: translate(var(--magnetic-x,0),var(--magnetic-y,0)); transition: transform .18s ease,background-color .18s ease,color .18s ease; }
.button span,.header-cta span,.text-link span { display: inline-block; transition: transform .18s ease; }
.button:hover span,.button:focus-visible span,.header-cta:hover span,.header-cta:focus-visible span,.text-link:hover span,.text-link:focus-visible span { transform: rotate(45deg); }
.experience-touch-ready :where(a,button,.project-card):active { transform: scale(.98); filter: brightness(1.08); }
.ribbon > div { transform: translate3d(calc(var(--scroll-offset,0px) * var(--scroll-direction,1)),0,0); will-change: transform; }
.hero-copy > * { animation: hero-line-in .55s both cubic-bezier(.2,.8,.2,1); }
.hero-copy > *:nth-child(2) { animation-delay: .06s; }
.hero-copy > *:nth-child(3) { animation-delay: .12s; }
.hero-copy > *:nth-child(4) { animation-delay: .18s; }
@keyframes hero-line-in { from { opacity: 0; transform: translateY(28px); clip-path: inset(100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }

@supports (animation-timeline: view()) {
  html[data-experience='active'] .reveal { animation: experience-reveal both linear; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  @keyframes experience-reveal { from { opacity: 0; transform: translateY(22px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
}

@media (pointer: coarse), (max-width: 800px) { .experience-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .experience-intro,.experience-cursor { display: none !important; }
  .hero-copy > *,.reveal,.ribbon > div,.button,.header-cta { animation: none !important; transform: none !important; transition: none !important; filter: none !important; opacity: 1 !important; }
}
html[data-experience='static'] .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
.attachment-field { --upload-progress: 0%; position: relative; overflow: hidden; }
.attachment-field::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: 0; width: var(--upload-progress); background: #ffde0022; pointer-events: none; transition: width .16s linear; }
.attachment-field > * { position: relative; z-index: 1; }
.attachment-progress { height: 3px; margin-top: 10px; background: #ffffff20; }
.attachment-progress i { display: block; width: var(--upload-progress); height: 100%; background: #ffde00; transition: width .16s linear; }
.contact-success { position: relative; }
.contact-success::after { content: 'PEDIDO RECEBIDO'; position: absolute; right: clamp(16px,4vw,38px); top: clamp(16px,4vw,32px); padding: 8px 12px; border: 2px solid #ffde00; color: #ffde00; font: 800 11px/1 sans-serif; letter-spacing: .12em; opacity: 0; transform: rotate(-6deg) scale(1.3); pointer-events: none; }
.contact-success.experience-stamped::after { animation: experience-stamp .38s cubic-bezier(.2,.9,.3,1.25) forwards; }
@keyframes experience-stamp { to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .contact-success.experience-stamped::after { animation: none; opacity: 1; transform: rotate(-6deg); } }
/* Consent is driven from the same registry that emits CSP and the privacy table. */
.consent-root { position: relative; z-index: 1000; }
.consent-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; max-width: 980px; margin: auto; padding: 22px; border: 1px solid #ffde0066; background: #090909f5; box-shadow: 0 20px 60px #000b; color: #dadada; }
.consent-banner strong { color: #fff; font-size: 1rem; }
.consent-banner p { max-width: 620px; margin: 8px 0; color: #aaa; font-size: .82rem; line-height: 1.55; }
.consent-banner [data-consent-choose] { padding: 4px 0; color: #ffde00; text-decoration: underline; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions button,.consent-save { min-height: 46px; padding: 12px 18px; border: 1px solid #ffde00; color: #000; background: #ffde00; font-weight: 700; }
.consent-actions button:first-child { color: #ffde00; background: transparent; }
.consent-dialog { width: min(640px, calc(100vw - 32px)); padding: 28px; border: 1px solid #ffde0066; background: #111; color: #dadada; }
.consent-dialog h2 { max-width: 90%; font-size: clamp(1.8rem,5vw,3rem); }
.consent-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; color: #ffde00; border: 1px solid #ffde00; }
.consent-option { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid #ffffff25; }
.consent-option span { display: grid; gap: 7px; }
.consent-option small,.consent-id { color: #aaa; line-height: 1.5; }
.consent-option input { width: 24px; height: 24px; accent-color: #ffde00; }
.consent-save { margin-top: 24px; }
.consent-table-wrap { max-width: 100%; overflow-x: auto; }
.consent-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.consent-table th,.consent-table td { padding: 12px; border: 1px solid #ffffff25; text-align: left; vertical-align: top; }
.privacy-preferences { margin-top: 24px; padding: 12px 16px; border: 1px solid #ffde00; color: #ffde00; }
@media (max-width: 640px) { .consent-banner { grid-template-columns: 1fr; left: 10px; right: 10px; bottom: 10px; max-height: calc(100svh - 20px); overflow: auto; } .consent-actions { width: 100%; } }
.language-switch { display: flex; align-items: center; gap: 5px; margin-left: 12px; color: #999; font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.language-switch a[aria-current="page"] { color: #ffde00; }
.legal-language { float: right; margin-top: -8px; }
@media (max-width: 800px) { .language-switch { order: 3; margin-left: auto; margin-right: 10px; } .header-cta { display: none; } }