/* ============================================================
   TYPE LAB — DESIGN SYSTEM 2 · "O Ateliê"
   Fusão: Type Lab (base) × lumina-video × digital-architect × green-museum
   As classes abaixo preservam os NOMES originais de cada fonte.
   Requer: framer-fonts.css + styleguide.css (tokens e componentes base)
   ============================================================ */
:root{
  --f-serif:'Instrument Serif',Georgia,serif;          /* lumina-video */
  --beam-a:rgba(254,154,215,.85);                      /* rosa elétrico */
  --beam-b:rgba(214,214,204,.55);                      /* bone */
}

/* ============================================================
   LUMINA-VIDEO — botão com partículas (.button-custom re-tematizado)
   ============================================================ */
.button-custom{cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  transition:all .25s ease;border-radius:9999px;border:none;padding:12px 28px;min-height:48px;
  background:radial-gradient(65.28% 65.28% at 50% 100%,rgba(254,154,215,.85) 0%,rgba(254,154,215,0) 100%),linear-gradient(0deg,#5D0F0D,#5D0F0D)}
.button-custom::before{content:"";position:absolute;inset:1px;border-radius:9999px;z-index:0;transition:all .5s ease-in-out;
  background:linear-gradient(177.95deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 100%)}
.button-custom::after{content:"";position:absolute;inset:2px;border-radius:9999px;z-index:0;transition:all .5s ease-in-out;
  background:radial-gradient(65.28% 65.28% at 50% 100%,rgba(254,154,215,.85) 0%,rgba(254,154,215,0) 100%),linear-gradient(0deg,#5D0F0D,#5D0F0D)}
.button-custom:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(254,154,215,.45)}
.button-custom:active{transform:scale(.97)}
.button-custom:hover .inner svg.icon{transform:translateX(2px)}
.inner{z-index:2;gap:8px;position:relative;width:100%;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-label);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.inner svg.icon{width:16px;height:16px;transition:transform .3s ease;stroke:#fff;fill:none}
.points_wrapper{overflow:hidden;width:100%;height:100%;pointer-events:none;position:absolute;z-index:1}
.points_wrapper .point{bottom:-10px;position:absolute;animation:floating-points infinite ease-in-out;pointer-events:none;
  width:2px;height:2px;background-color:#FE9AD7;border-radius:9999px}
@keyframes floating-points{0%{transform:translateY(0)}85%{opacity:0}100%{transform:translateY(-55px);opacity:0}}
.points_wrapper .point:nth-child(1){left:10%;opacity:1;animation-duration:2.35s;animation-delay:.2s}
.points_wrapper .point:nth-child(2){left:30%;opacity:.7;animation-duration:2.5s;animation-delay:.5s}
.points_wrapper .point:nth-child(3){left:25%;opacity:.8;animation-duration:2.2s;animation-delay:.1s}
.points_wrapper .point:nth-child(4){left:44%;opacity:.6;animation-duration:2.05s}
.points_wrapper .point:nth-child(5){left:50%;opacity:1;animation-duration:1.9s}
.points_wrapper .point:nth-child(6){left:75%;opacity:.5;animation-duration:1.5s;animation-delay:1.5s}
.points_wrapper .point:nth-child(7){left:88%;opacity:.9;animation-duration:2.2s;animation-delay:.2s}

/* ---- lumina: feixes de luz caindo ---- */
@keyframes beam-fall{0%{transform:translateY(-100%);opacity:0}5%{opacity:.5}50%{opacity:1}95%{opacity:.5}100%{transform:translateY(120vh);opacity:0}}
.animate-beam-1{animation:beam-fall 6s linear infinite;animation-delay:0s}
.animate-beam-2{animation:beam-fall 8s linear infinite;animation-delay:2s}
.animate-beam-3{animation:beam-fall 7s linear infinite;animation-delay:4s}
.beams{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.beams i{position:absolute;top:0;width:1px;height:260px;font-style:normal;
  background:linear-gradient(to bottom,transparent,var(--beam-a),transparent)}
.beams i.soft{background:linear-gradient(to bottom,transparent,var(--beam-b),transparent);height:190px}

/* ---- lumina: reveal com blur + scroll trigger ---- */
@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(30px);filter:blur(8px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
.animate-on-scroll{animation-play-state:paused!important}
.animate-on-scroll.animate{animation-play-state:running!important}
.fade-slide{animation:fadeSlideIn 1.1s var(--ease-expo) both}

/* ---- lumina: pilha de cards + borda gradiente ---- */
.card-stack-item{transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .5s ease,z-index 0s;
  position:absolute;inset:0;border-radius:16px;overflow:hidden;border:1px solid rgba(214,214,204,.14);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.55);transform-origin:bottom;background:#1C0000}
.card-stack-item img{width:100%;height:100%;object-fit:cover}
.card-stack-item .stack-label{position:absolute;left:18px;bottom:16px;z-index:2}
.card-stack-item .stack-label b{display:block;font-family:var(--f-semi);font-weight:600;font-size:20px;color:#fff}
.card-stack-item .stack-label small{font-family:var(--f-label);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.card-stack-item .scrim{position:absolute;inset:0;background:linear-gradient(244deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.8) 100%)}
[style*="--border-gradient"]{position:relative}
[style*="--border-gradient"]::before{content:"";position:absolute;inset:0;padding:1px;border-radius:var(--border-radius-before,inherit);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  background:var(--border-gradient);pointer-events:none;z-index:3}
.perspective-distant{perspective:1200px!important}
.transform-style-preserve-3d{transform-style:preserve-3d!important}

/* ============================================================
   DIGITAL-ARCHITECT — reveals mascarados, marquee, Ken Burns
   ============================================================ */
.reveal{opacity:0;transform:translateY(2rem);transition:all 1s cubic-bezier(.16,1,.3,1)}
.reveal.active{opacity:1;transform:translateY(0)}
.text-reveal-wrapper{overflow:hidden;display:inline-block;vertical-align:bottom}
.text-reveal-content{transform:translateY(110%);opacity:0;display:block;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity 1.2s ease}
.reveal-active .text-reveal-content{transform:translateY(0);opacity:1}
.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}
.delay-500{transition-delay:.5s}.delay-700{transition-delay:.7s}
.carousel-slide{position:absolute;inset:0;transition:opacity 1.5s ease-in-out;opacity:0;overflow:hidden}
.carousel-slide.active{opacity:1}
.carousel-slide img{transform:scale(1);transition:transform 10s ease-out;width:100%;height:100%;object-fit:cover}
.carousel-slide.active img{transform:scale(1.1)}
.marquee-container{display:flex;overflow:hidden;user-select:none}
.marquee-content{flex-shrink:0;display:flex;justify-content:space-around;min-width:100%;animation:scroll 40s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.marquee-container:hover .marquee-content{animation-play-state:paused}
.marquee-container .mq{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 32px;white-space:nowrap}
.marquee-container .mq.pink{color:var(--pink)}
.nav-load{opacity:0;transform:translateY(-10px);transition:all .8s ease-out}
.nav-load.loaded{opacity:1;transform:translateY(0)}
/* .nav do Type Lab centraliza com translateX(-50%) — compõe os dois transforms */
.nav.nav-load{transform:translate(-50%,-10px);animation:none}
.nav.nav-load.loaded{transform:translate(-50%,0)}
.parallax-element{will-change:transform}
/* architect: stat com régua e número gigante */
.hero-stat{border-top:1px solid rgba(214,214,204,.18);padding:18px 4px 0;transition:background var(--dur-1)}
.hero-stat h2{font-family:var(--f-semi);font-weight:600;font-size:44px;line-height:1;letter-spacing:-.02em}
.hero-stat small{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* architect: project card */
.project-card{border:1px solid rgba(214,214,204,.18);background:rgba(28,0,0,.35);overflow:hidden;cursor:pointer;
  display:grid;grid-template-columns:1fr 1fr;min-height:230px;border-radius:var(--r-xl);transition:background .5s,border-color .5s}
.project-card:hover{background:rgba(28,0,0,.6);border-color:rgba(254,154,215,.4)}
.project-card .pc-info{padding:26px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(214,214,204,.14)}
.project-card .pc-kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.project-card .pc-kicker .num{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.project-card .pc-kicker .rule{height:1px;width:32px;background:rgba(214,214,204,.3)}
.project-card .pc-kicker .cat{font-family:var(--f-label);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink)}
.project-card h4{font-family:var(--f-semi);font-weight:600;font-size:26px;margin-bottom:10px;transition:transform .5s var(--ease-expo)}
.project-card:hover h4{transform:translateX(8px)}
.project-card p{font-size:14px;color:var(--muted);line-height:160%}
.project-card .pc-media{position:relative;overflow:hidden}
.project-card .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-expo)}
.project-card:hover .pc-media img{transform:scale(1.06)}
@media(max-width:760px){.project-card{grid-template-columns:1fr}.project-card .pc-info{border-right:0;border-bottom:1px solid rgba(214,214,204,.14)}}

/* ============================================================
   GREEN-MUSEUM — nav do styleguide, ticket, swatches, spec table
   ============================================================ */
.ds-nav{position:sticky;top:0;z-index:100;background:rgba(28,0,0,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(214,214,204,.12)}
.ds-nav-links{display:flex;gap:2rem;flex-wrap:wrap;padding:1rem 0;max-width:1280px;margin:0 auto}
.ds-nav-links a{font-size:.875rem;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s;font-family:var(--f-label)}
.ds-nav-links a:hover{color:var(--bone)}
.ds-section{scroll-margin-top:80px}
.ticket-bottom{background-image:radial-gradient(circle,transparent 50%,var(--wine) 50%);background-size:20px 20px;
  background-position:-10px -10px;height:10px;width:100%;transform:rotate(180deg)}
.ticket{max-width:330px;border-radius:16px 16px 0 0;overflow:hidden;background:var(--cream);color:var(--ink);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);transition:transform var(--dur-2) var(--ease-spring)}
.ticket:hover{transform:translateY(-6px) rotate(-1deg)}
.ticket .t-head{padding:22px 24px 8px;display:flex;justify-content:space-between;align-items:flex-start}
.ticket .t-head .t-ic{width:44px;height:44px;border-radius:12px;background:rgba(93,15,13,.08);display:grid;place-items:center;color:var(--wine)}
.ticket .t-body{padding:0 24px 20px}
.ticket h3{font-family:var(--f-semi);font-weight:600;font-size:23px;margin:12px 0 2px}
.ticket .t-price{display:flex;align-items:baseline;gap:5px;margin:8px 0 14px}
.ticket .t-price b{font-family:var(--f-serif);font-weight:400;font-size:40px;letter-spacing:-.01em}
.ticket .t-price span{font-size:13px;color:rgba(0,0,0,.5)}
.ticket ul{list-style:none;margin:0 0 6px;padding:0}
.ticket ul li{display:flex;gap:9px;align-items:center;font-size:13.5px;padding:5px 0;color:rgba(0,0,0,.72)}
.ticket ul li svg{width:15px;height:15px;stroke:var(--wine);flex:none}
.ticket .t-tear{border-top:2px dashed rgba(93,15,13,.25);margin:10px 24px 0;padding:14px 0 18px;display:flex;justify-content:space-between;align-items:center}
.ticket .t-tear small{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:rgba(0,0,0,.45)}
.ticket .t-tear .code{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--wine)}
/* museum: grid de cores auxiliar */
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}
.color-swatch{border-radius:.75rem;overflow:hidden;border:1px solid rgba(0,0,0,.12)}
.color-swatch-preview{height:120px;width:100%}
.color-swatch-info{padding:1rem;background:#fff}
.color-swatch-name{font-weight:600;font-size:.875rem;margin-bottom:.25rem;color:#1c1917;font-family:var(--f-semi)}
.color-swatch-value{font-size:.75rem;color:#78716c;font-family:var(--f-mono)}
/* museum: tabela de tipografia */
.typography-spec{width:100%;border-collapse:collapse}
.typography-spec tr{border-bottom:1px solid rgba(214,214,204,.14)}
.typography-spec td{padding:1.5rem 0;vertical-align:baseline}
.typography-spec td:first-child{width:200px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pink);font-family:var(--f-label)}
.typography-spec td:last-child{width:230px;text-align:right;font-size:.72rem;color:var(--muted);font-family:var(--f-mono);line-height:1.9}
@media(max-width:900px){.typography-spec td:last-child{display:none}}
/* museum: vitrine de estados de componente */
.component-showcase{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start}
.component-state{display:flex;flex-direction:column;gap:.5rem}
.component-state-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-family:var(--f-label)}
/* museum: imagem grayscale→cor */
.gray-hover img{filter:grayscale(1);opacity:.82;transition:all .7s ease}
.gray-hover:hover img{filter:grayscale(0);opacity:1;transform:scale(1.05)}

/* ============================================================
   DS2 — hero "O Ateliê" e composições próprias
   ============================================================ */
.serif-accent{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0}
.hero2 .hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:56px;align-items:center}
@media(max-width:1080px){.hero2 .hero-inner{grid-template-columns:1fr}.hero2 .stack-scene{margin-top:26px}}
.hero2 h1{font-size:clamp(38px,4.9vw,72px)}
.hero2 .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;border-top:0;padding-top:0}
.stack-scene{position:relative;height:480px}
.stack-scene .stack-wrap{position:absolute;inset:24px 8px 64px}
.stack-scene .gallery-tag{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;white-space:nowrap}
.stamp{position:absolute;z-index:6;top:-26px;right:-22px;width:112px;height:112px;animation:spin 22s linear infinite;pointer-events:none}
.stamp text{font-family:var(--f-label);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;fill:var(--pink)}
.stamp circle{fill:none;stroke:rgba(254,154,215,.4);stroke-dasharray:3 5}
@keyframes spin{to{transform:rotate(360deg)}}
/* moldura de galeria com Ken Burns (architect) para seção de cores */
.kenburns-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;height:300px;background:var(--maroon)}
.kenburns-frame figcaption{position:absolute;left:20px;bottom:16px;z-index:2;color:#fff}
.kenburns-frame figcaption b{font-family:var(--f-semi);font-size:20px;display:block}
.kenburns-frame figcaption small{font-family:var(--f-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.kenburns-frame .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(244deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.75) 100%)}
/* selo de fonte de cada elemento (créditos da fusão) */
.src-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-pill);border:1px solid rgba(254,154,215,.35);color:var(--pink);background:rgba(254,154,215,.07)}
.on-light .src-tag{border-color:rgba(93,15,13,.3);color:var(--wine);background:rgba(93,15,13,.05)}
.src-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
/* fundo alternativo: linhas de planta baixa (architect) */
.blueprint{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(rgba(214,214,204,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(214,214,204,.7) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.on-light .blueprint{background-image:linear-gradient(rgba(28,0,0,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(28,0,0,.5) 1px,transparent 1px)}