/* Cinco direções de arte: arquitetura, esporte, identidade, odontologia e perfumaria. */
.project-preview { container-type: size; --world-accent: #d8e89b; }
.project-preview .preview-top { inset-inline: 4.5%; padding-top: min(2.5cqw, 4cqh); padding-bottom: min(2cqw, 3cqh); }
.project-preview .preview-bottom { z-index: 3; left: 4.5%; bottom: 5%; }
.project-preview .preview-eyebrow { display: flex; align-items: center; gap: .8cqw; font-size: clamp(6px, .67cqw, 10px); letter-spacing: .1em; }
.project-preview .preview-eyebrow i { width: .45cqw; height: .45cqw; min-width: 3px; min-height: 3px; border-radius: 50%; background: var(--world-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--world-accent), transparent 45%); }
.world-description { display: block; font-size: clamp(8px, .95cqw, 14px); line-height: 1.65; letter-spacing: -.02em; margin: 0 0 2cqw; opacity: .8; }
.world-edition { position: absolute; right: 4.5%; top: 20%; z-index: 3; font-size: clamp(5px, .58cqw, 9px); letter-spacing: .14em; }
.project-preview .preview-small-link { padding: .6cqw .65cqw .6cqw 1.2cqw; border: 1px solid currentColor; border-radius: 100px; gap: 1.8cqw; font-size: clamp(7px, .76cqw, 12px); }
.project-preview .preview-small-link b { min-width: 18px; min-height: 18px; width: 2.1cqw; height: 2.1cqw; font-size: 1.3cqw; border: 0; background: currentColor; }
.project-preview > .preview-image { inset: 0; width: 100%; height: 100%; z-index: 1; animation: none; transform: none; }
.preview-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.project-preview.is-3d-ready > .preview-image { opacity: 0; filter: none; }

.project-preview.preview-aura { --world-accent: #bb6032; color: #34291e; background: radial-gradient(ellipse at 79% 40%, #f5cf8d 0%, #dca969 32%, transparent 65%), linear-gradient(115deg, #f1e8d8, #d0aa7c); }
.project-preview.preview-aura .preview-top { border-color: #49351c30; }
.project-preview.preview-aura .preview-shade { background: linear-gradient(90deg, #f1e8d8 0%, #f1e8d8c9 25%, transparent 60%); }
.project-preview.preview-aura .aura-copy { top: 27%; left: 4.5%; }
.project-preview.preview-aura .aura-copy p { font-size: min(7.9cqw, 16cqh); line-height: .99; margin: 2.1cqw 0 1.7cqw; letter-spacing: -.065em; }
.project-preview.preview-aura .aura-copy p em { color: #845130; }
.project-preview.preview-aura .preview-small-link { border-color: #48301f50; }
.project-preview.preview-aura .preview-small-link b { background: #34291e; color: #f4e4ce; }
.aura-sun { position: absolute; top: -16%; right: 3%; width: 47%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(160deg, #ffe6ac, #e3a054 70%, #d28a4d); opacity: .8; box-shadow: 0 0 100px #f6dfab88; }
.aura-contours { position: absolute; inset: 16% -8% -45% 38%; border-radius: 50%; border: 1px solid #7e59292b; transform: rotate(-20deg); box-shadow: 0 0 0 28px #d4b18218, 0 0 0 29px #7e592921, 0 0 0 62px #d4b18210, 0 0 0 63px #7e592919; }
.world-scene-note { position: absolute; z-index: 3; right: 8%; bottom: 14%; display: flex; flex-direction: column; gap: .6cqw; padding-left: 1.2cqw; border-left: 1px solid #5c402343; font-size: .7cqw; color: #543e28; }
.world-scene-note > span:last-child { font: italic 1.05cqw Georgia, serif; }
.project-preview.preview-aura .aura-coordinate { color: #705234; font-size: .55cqw; right: 2.3%; top: 43%; }
.project-preview.preview-aura .preview-grain { opacity: .065; mix-blend-mode: multiply; }

.project-preview.preview-vanta { --world-accent: #d4ff4a; background: radial-gradient(ellipse at 77% 48%, #455719 0%, #182509 35%, #080d08 72%); color: #f0f5dc; }
.project-preview.preview-vanta .preview-top { border-color: #d7ff6133; }
.project-preview.preview-vanta .vanta-logo { font-size: min(3.2cqw, 7cqh); font-style: italic; }
.project-preview.preview-vanta .preview-shade { background: linear-gradient(90deg, #080d08aa, transparent 58%); opacity: 1; }
.project-preview.preview-vanta .vanta-copy { top: 26%; left: 4.5%; }
.project-preview.preview-vanta .vanta-copy p { font-size: min(9.1cqw, 18cqh); font-weight: 900; font-style: italic; line-height: .83; letter-spacing: -.075em; margin: 2.3cqw 0 1.8cqw; }
.project-preview.preview-vanta .vanta-copy p em { font-family: Arial, Helvetica, sans-serif; font-weight: 900; color: #d4ff4a; }
.project-preview.preview-vanta .world-description { color: #bec9a7; }
.project-preview.preview-vanta .preview-small-link { color: #d4ff4a; border-color: #d4ff4a70; }
.project-preview.preview-vanta .preview-small-link b { background: #d4ff4a; color: #101709; }
.project-preview.preview-vanta .vanta-ghost { left: 39%; top: 42%; font-size: 22cqw; font-style: italic; letter-spacing: -.085em; -webkit-text-stroke: 1px #d4ff4a20; transform: rotate(-12deg); }
.vanta-speed-field { position: absolute; inset: 0; opacity: .24; background: repeating-linear-gradient(151deg, transparent 0 89px, #d4ff4a23 90px 91px, transparent 92px 175px); mask-image: linear-gradient(90deg, transparent 25%, #000); }
.vanta-product-label { position: absolute; z-index: 3; bottom: 17%; right: 6%; display: flex; gap: 1.1cqw; align-items: center; color: #d4ff4a; }
.vanta-product-label > span:first-child { font: 900 italic 2.7cqw Arial, sans-serif; letter-spacing: -.07em; }
.vanta-product-label > span:nth-child(2) { font-size: .53cqw; line-height: 1.5; letter-spacing: .08em; border-left: 1px solid #d4ff4a60; padding-left: 1cqw; }
.vanta-product-label > i { font-style: normal; font-size: 3.3cqw; }
.project-preview.preview-vanta .preview-bottom { color: #c8d5a8; }

.project-preview.preview-autoral { --world-accent: #bfa1ff; color: #f4efff; background: radial-gradient(ellipse at 78% 50%, #402774 0%, #1c133a 39%, #0c0919 78%); }
.project-preview.preview-autoral .autoral-halo { background: radial-gradient(ellipse at 76% 56%, #7c44c92e, transparent 60%); }
.project-preview.preview-autoral .autoral-copy { top: 27%; left: 4.5%; }
.project-preview.preview-autoral .autoral-copy p { font-size: min(7.1cqw, 15cqh); line-height: .98; margin: 2.1cqw 0 1.8cqw; letter-spacing: -.07em; }
.project-preview.preview-autoral .autoral-copy p em { color: #c2a1fa; }
.project-preview.preview-autoral .world-description { color: #c7b9e0; }
.project-preview.preview-autoral .preview-small-link { color: #d8c6ff; border-color: #bc9dfb65; }
.project-preview.preview-autoral .preview-small-link b { color: #1b102e; background: #d8c6ff; }
.project-preview.preview-autoral .autoral-cross, .project-preview.preview-autoral .autoral-ghost { display: none; }
.autoral-grid { position: absolute; inset: 12% -10% -65% 26%; background-image: linear-gradient(#b187ff16 1px, transparent 1px), linear-gradient(90deg, #b187ff16 1px, transparent 1px); background-size: 3.5cqw 3.5cqw; transform: perspective(500px) rotateX(58deg) rotateZ(-15deg); mask-image: radial-gradient(ellipse, #000, transparent 70%); }
.autoral-supertype { position: absolute; top: 22%; right: -2%; font-size: 28cqw; font-weight: 700; letter-spacing: -.1em; color: transparent; -webkit-text-stroke: 1px #c5a1ff16; }
.autoral-orbit-label { position: absolute; bottom: 14%; right: 5.5%; z-index: 3; display: flex; gap: 1cqw; align-items: center; font-size: .6cqw; line-height: 1.5; letter-spacing: .1em; color: #d6c2fa; }
.autoral-orbit-label > span { font-size: 2.9cqw; }
.project-preview.preview-autoral .preview-bottom { color: #c7b5e2; }

.project-preview .aura-logo { font-size: min(3.6cqw, 8cqh); }
.project-preview .autoral-logo { width: min(3.4cqw, 7.5cqh); height: min(3.4cqw, 7.5cqh); }

@container (max-aspect-ratio: 1.4) {
  .project-preview .preview-top > span:nth-child(2), .project-preview .preview-bottom > span:last-child { display: none; }
  .project-preview .autoral-logo { width: 8cqw; height: 8cqw; max-width: 40px; max-height: 40px; }
  .project-preview .preview-top { inset-inline: 7%; padding-top: 6%; padding-bottom: 4%; }
  .project-preview .preview-top .aura-logo { font-size: min(8cqw, 5.5cqh); }
  .project-preview.preview-vanta .vanta-logo { font-size: min(7cqw, 5cqh); }
  .project-preview .preview-eyebrow { font-size: 6px; gap: 2cqw; letter-spacing: .04em; }
  .project-preview .preview-eyebrow i { width: 1cqw; height: 1cqw; }
  .project-preview .world-description { font-size: 7px; line-height: 1.5; margin-bottom: 0; }
  .project-preview .preview-small-link, .world-edition, .world-scene-note, .vanta-product-label, .autoral-orbit-label, .project-preview.preview-aura .aura-coordinate { display: none; }
  .project-preview.preview-aura .aura-copy, .project-preview.preview-vanta .vanta-copy, .project-preview.preview-autoral .autoral-copy { top: 21%; left: 7%; }
  .project-preview.preview-aura .aura-copy p { font-size: min(14cqw, 11cqh); margin: 3cqw 0; }
  .project-preview.preview-vanta .vanta-copy p { font-size: min(16.4cqw, 12cqh); margin: 3cqw 0; }
  .project-preview.preview-autoral .autoral-copy p { font-size: min(13.7cqw, 10.8cqh); margin: 3cqw 0; }
  .project-preview .preview-bottom { left: 7%; bottom: 6%; }
  .project-preview.preview-aura .preview-shade { background: linear-gradient(180deg, #efe3cd66, transparent 65%); }
  .project-preview.preview-aura .aura-sun { width: 95%; top: 34%; right: -16%; }
  .project-preview.preview-aura .aura-contours { inset: 44% -40% -15% 0; }
  .project-preview.preview-vanta .vanta-ghost { left: -5%; top: 65%; font-size: 42cqw; }
  .project-preview.preview-vanta .preview-shade { background: linear-gradient(180deg, #080d0866, transparent 60%); }
  .autoral-supertype { top: 47%; right: -8%; font-size: 58cqw; }
  .autoral-grid { inset: 38% -30% -15%; background-size: 9cqw 9cqw; }
  .project-preview.preview-autoral .autoral-mark { bottom: 16%; }
}
@media (min-width: 601px) and (max-height: 760px) {
  .project-preview .world-description { display: none; }
  .project-preview.preview-aura .aura-copy, .project-preview.preview-vanta .vanta-copy, .project-preview.preview-autoral .autoral-copy { top: 26%; }
  .project-preview.preview-aura .aura-copy p, .project-preview.preview-autoral .autoral-copy p { font-size: 6.4cqw; }
  .project-preview.preview-vanta .vanta-copy p { font-size: 7.6cqw; }
}

/* Alva — porcelana, luz difusa e precisão no cuidado. */
.project-preview.preview-alva { --world-accent: #648e7b; color: #263e34; background: radial-gradient(ellipse at 77% 43%, #b7cbbb 0%, #dde5d7 37%, transparent 69%), linear-gradient(115deg, #f4f2e8, #e3e9dc); }
.preview-alva .preview-top { border-color: #294e3729; }
.alva-logo { font: 400 min(4.2cqw, 8cqh)/.8 Georgia, serif; letter-spacing: -.09em; }
.alva-logo > span { display: inline-block; vertical-align: top; font: .23em Arial, sans-serif; margin: .2em 0 0 .5em; }
.alva-light { position: absolute; width: 48%; aspect-ratio: 1; top: 10%; right: 5%; border-radius: 50%; background: linear-gradient(140deg, #ffffffb8, #ecf1e550 45%, #93ad9633); box-shadow: inset 1px 1px 0 #ffffffaa, 0 25px 80px #6a91651b; }
.alva-rings { position: absolute; top: 12%; right: 2.5%; width: 52%; aspect-ratio: 1; border: 1px solid #4e74551a; border-radius: 50%; box-shadow: 0 0 0 25px #e9eee600, 0 0 0 26px #4e745510; }
.alva-copy, .eter-copy { position: absolute; z-index: 3; top: 27%; left: 4.5%; translate: var(--scene-shift-x, 0px) var(--scene-shift-y, 0px); }
.alva-copy p, .eter-copy p { font-weight: 400; font-size: min(7.3cqw, 15.3cqh); line-height: 1.02; letter-spacing: -.065em; margin: 2.2cqw 0 1.7cqw; }
.alva-copy p > span, .eter-copy p > span { display: block; }
.alva-copy p em { font-family: Georgia, serif; font-weight: 400; color: #6d8c72; letter-spacing: -.075em; }
.preview-alva .world-description { color: #56675b; }
.preview-alva .preview-small-link { border-color: #49634b50; }
.preview-alva .preview-small-link b { background: #345441; color: #f4f2e8; }
.preview-alva .preview-grain { mix-blend-mode: multiply; opacity: .035; }
.alva-detail { position: absolute; z-index: 3; right: 5%; bottom: 18%; display: grid; gap: 8px; font-size: .68cqw; color: #54705c; text-align: right; }
.alva-detail i { width: 5cqw; height: 1px; background: #68826b66; justify-self: end; }
.alva-detail > span:last-child { font: italic 1.05cqw Georgia, serif; }
.preview-alva .preview-bottom { color: #617464; }

/* Éter — vidro âmbar, cobre e sombras. */
.project-preview.preview-eter { --world-accent: #dbab76; color: #f6e9d5; background: radial-gradient(ellipse at 76% 45%, #573029 0%, #291813 37%, #140e0e 76%); }
.preview-eter .preview-top { border-color: #e9b38630; }
.eter-logo { font: 400 min(4.3cqw, 8cqh)/.8 Georgia, serif; letter-spacing: -.055em; }
.eter-logo > span { display: block; margin-top: .8cqw; font: .48cqw Arial, sans-serif; letter-spacing: .5em; }
.eter-aura { position: absolute; inset: -40% -25% -35% 32%; background: conic-gradient(from 20deg at 50% 50%, transparent 0deg 80deg, #ffd4a222 110deg, transparent 146deg 252deg, #bc794522 275deg, transparent 307deg); animation: eter-light-turn 45s linear infinite; filter: blur(12px); }
.eter-arch { position: absolute; width: 37%; height: 125%; top: 12%; right: 10%; border: 1px solid #d9ab782b; border-radius: 50% 50% 0 0; box-shadow: 0 0 0 15px #ffffff00, 0 0 0 16px #d9ab7810; transform: rotate(13deg); }
.eter-supertype { position: absolute; top: 5%; right: 4%; font: 36cqw/.9 Georgia, serif; color: #f4c59404; -webkit-text-stroke: 1px #f4c5940c; }
.eter-copy p { font-family: Georgia, serif; font-size: min(7.3cqw, 15.3cqh); letter-spacing: -.055em; }
.eter-copy p em { font-weight: 400; color: #d6a67d; }
.preview-eter .world-description { color: #c5a68e; }
.preview-eter .preview-small-link { border-color: #d0aa7f60; color: #e9c7a0; }
.preview-eter .preview-small-link b { background: #e9c7a0; color: #281b15; }
.eter-detail { position: absolute; right: 5%; bottom: 17%; z-index: 3; display: flex; gap: 1.2cqw; align-items: center; font-size: .6cqw; letter-spacing: .1em; line-height: 1.7; color: #d1ad84; }
.eter-detail i { width: 1px; height: 2.1cqw; background: #dab58a55; }
.preview-eter .preview-bottom { color: #c7a786; }
.is-cinematic .project-panel.is-active .alva-copy p > span, .is-cinematic .project-panel.is-active .eter-copy p > span { animation: project-copy-enter 1100ms cubic-bezier(.16,.7,.1,1) both; }
@keyframes eter-light-turn { to { transform: rotate(360deg); } }

@container (max-aspect-ratio: 1.4) {
  .preview-alva .alva-logo, .preview-eter .eter-logo { font-size: min(9cqw, 6cqh); }
  .eter-logo > span { font-size: 1.3cqw; margin-top: 1.6cqw; }
  .alva-copy, .eter-copy { top: 21%; left: 7%; }
  .alva-copy p, .eter-copy p { font-size: min(13.2cqw, 10cqh); margin: 3cqw 0; }
  .alva-detail, .eter-detail { display: none; }
  .alva-light { width: 90%; top: 46%; right: 5%; }
  .alva-rings { width: 100%; top: 43%; right: 0; }
  .eter-aura { inset: 15% -50% -45%; }
  .eter-arch { width: 70%; height: 74%; top: 44%; right: 15%; }
  .eter-supertype { top: 43%; right: 4%; font-size: 78cqw; }
  .project-preview.preview-alva { background: radial-gradient(ellipse at 50% 75%, #b7cbbb, #e5ebdf 45%, #f4f2e8 85%); }
  .project-preview.preview-eter { background: radial-gradient(ellipse at 50% 73%, #5b3325, #281713 44%, #140e0e 86%); }
}
@media (prefers-reduced-motion: reduce) {
  .eter-aura, .alva-copy p > span, .eter-copy p > span { animation: none !important; }
}