/* ══════════════════════════════════════════════
   LOOKBOOK IMERSIVO — Design System
   Casamento Aline & Guilherme
   ══════════════════════════════════════════════ */

/* ── Design Tokens ──
   Os tokens (paleta PIV + semânticos + escalas) agora vivem no :root do
   base.css como fonte única de verdade. O lookbook apenas os consome. */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.lookbook{
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  color:#252624;
  background:#FFFFFF;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* ── Dot Navigation ── */
.dot-nav{
  position:fixed;right:2rem;top:50%;transform:translateY(-50%);
  z-index:100;display:flex;flex-direction:column;gap:1.25rem;
  mix-blend-mode:difference;
}
.dot-nav a{
  display:block;width:8px;height:8px;border-radius:50%;
  background:rgba(246,240,237,0.3);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}
.dot-nav a:hover,.dot-nav a.active{
  background:#CAA778;transform:scale(1.5);
}
.dot-nav a .dot-label{
  position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);
  font-size:0.55rem;letter-spacing:0.15em;text-transform:uppercase;
  color:#F6F0ED;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity 0.3s;
}
.dot-nav a:hover .dot-label{opacity:1}

/* ── Fullscreen Sections ── */
.look-section{
  min-height:100vh;position:relative;
  display:flex;align-items:center;justify-content:center;
}
/* Only clip sections WITHOUT watermark textures */
.look-section.clip{overflow:hidden}
.look-section.pad{padding:var(--pad-section) 4rem}

/* ── Section Backgrounds ── */
.bg-dark{background:var(--piv-ink);color:var(--piv-offwhite)}
.bg-cream{background:var(--piv-offwhite);color:var(--piv-ink)}
.bg-sage{background:var(--piv-verde);color:var(--piv-offwhite)}
.bg-blush{background:var(--piv-rosa-claro);color:var(--piv-ink)}
.bg-sand{background:var(--piv-bege);color:var(--piv-ink)}
.bg-gold{background:var(--piv-gold);color:var(--piv-ink)}
.bg-white{background:var(--bg);color:var(--piv-ink)}

/* ── Single morphing background canvas ──
   Um único fundo fixo para todo o layout. As seções ficam transparentes,
   então as marcas d'água/folhas fluem sem nenhuma seção "cortando" por cima. */
html{background:#FFFFFF}
#bg-canvas{
  position:fixed;inset:0;z-index:-10;background-color:#FFFFFF;
  pointer-events:none;
}
body.lookbook{background:transparent}

/* Seções transparentes — o canvas (e as texturas) aparecem através delas.
   Painéis de conteúdo dentro de splits (.editorial-content) mantêm seu fundo. */
.look-hero,
.look-section.bg-white,.look-section.bg-cream,.look-section.bg-sand,
.look-section.bg-blush,.look-section.bg-gold,.look-section.bg-dark,
.type-showcase.bg-white,.type-showcase.bg-cream{
  background:transparent;
}
/* O Statement mantém texto claro — o canvas morfa para escuro atrás dele. */
.look-section.bg-dark{color:var(--piv-offwhite)}

/* ── Camadas de fundo (ordem de empilhamento global) ──
   Sem isolation: z-index negativos valem no contexto raiz, então a ordem
   é sempre a mesma em toda a página:
     canvas (-10)  <  marca d'água (-3)  <  folhas (-2)  <  conteúdo (0+)
   Garante: marca d'água SEMPRE ao fundo; folha sempre na frente dela. */
.parallax-texture{
  position:absolute;pointer-events:none;z-index:-3;
  will-change:transform;
}
.parallax-texture img{
  width:100%;height:100%;object-fit:contain;
}
/* Folhas (parallax-texture cujo src é "folha") ficam acima das marcas d'água */
.parallax-texture[src*="folha"]{z-index:-2}
/* Folhas grandes na lateral */
.leaf-sweep{
  position:absolute;pointer-events:none;z-index:-2;
  will-change:transform;
}
.leaf-sweep img{width:100%;height:auto;object-fit:contain}

/* ── Hero ── */
.look-hero{
  height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:transparent;position:relative;color:#252624;
}
.look-hero .overline{
  font-size:0.6rem;letter-spacing:0.4em;text-transform:uppercase;
  color:var(--accent);margin-bottom:2rem;opacity:0;
  animation:fadeUp 1s 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
  position:relative;z-index:2;
}
.look-hero #logo-animated{
  height:clamp(4rem,8vw,7rem);margin-bottom:2rem;overflow:visible;
}
.look-hero .subtitle{
  font-family:'Farmhouse',cursive;font-size:clamp(1rem,2vw,1.5rem);
  color:var(--text-body);opacity:0;
  animation:fadeUp 1s 1.8s var(--ease) forwards;
}
.scroll-cue{
  position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.75rem;
  opacity:0;animation:fadeUp 1s 2.5s cubic-bezier(0.4,0,0.2,1) forwards;
}
.scroll-cue span{
  font-size:0.5rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-muted);
}
.scroll-cue .line{
  width:1px;height:40px;background:var(--accent);
  animation:scrollLine 2s ease-in-out infinite;
}

/* ── Color Panels ── */
.color-panel{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:1.5rem;position:relative;
  transition:background 0.6s;
}
.color-panel .color-name{
  font-family:'Gallient',serif;text-transform:uppercase;
  font-size:clamp(2.5rem,6vw,5rem);line-height:1;
  mix-blend-mode:overlay;opacity:0.6;
}
.color-panel .color-hex{
  font-family:'Montserrat',sans-serif;font-size:0.7rem;
  letter-spacing:0.3em;text-transform:uppercase;opacity:0.5;
}

/* ── Typography Showcase ── */
.type-showcase{
  min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:4rem;text-align:center;
}
.type-showcase .giant{
  font-size:clamp(4rem,12vw,10rem);line-height:0.9;
}
.type-showcase .meta{
  font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;
  margin-top:2rem;opacity:0.4;
}

/* ── Editorial Split ── */
.editorial-row{
  display:grid;grid-template-columns:1fr 1fr;min-height:100vh;
}
.editorial-row.reverse{direction:rtl}
.editorial-row.reverse>*{direction:ltr}
.editorial-img{
  position:relative;overflow:hidden;
}
.editorial-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 8s ease-out;
}
.editorial-img:hover img{transform:scale(1.05)}
.editorial-content{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,4vw,5rem) clamp(2.5rem,6vw,7rem);
}
.editorial-content .overline{
  font-size:0.68rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.5rem;
}
.editorial-content h3{
  font-family:'Gallient',serif;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,3rem);line-height:1.15;margin-bottom:1.5rem;
}
.editorial-content p{
  font-weight:300;font-size:clamp(1rem,1.2vw,1.2rem);
  line-height:1.9;color:var(--text-body);max-width:470px;
}

/* ── Component Cards (glass) ── */
.comp-glass{
  background:rgba(246,240,237,0.06);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(246,240,237,0.1);
  border-radius:16px;padding:2.5rem;
  transition:transform 0.5s cubic-bezier(0.4,0,0.2,1),border-color 0.5s;
}
.comp-glass:hover{
  transform:translateY(-4px);
  border-color:rgba(202,167,120,0.3);
}

/* ── Horizontal Gallery ── */
.hgallery-wrap{
  width:100%;overflow:hidden;position:relative;
  height:80vh;background:transparent;
}
.hgallery-track{
  display:flex;gap:2rem;align-items:center;
  height:100%;padding:0 4rem;will-change:transform;
}
.hgallery-track .gal-item{
  flex-shrink:0;border-radius:12px;overflow:hidden;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.hgallery-track .gal-item:hover{transform:scale(1.03)}
.hgallery-track .gal-item img{
  width:100%;height:100%;object-fit:cover;
}

/* ── Specimen Row ── */
.specimen-row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(2rem,4vw,6rem);flex-wrap:wrap;
  padding:2rem 4rem;
}
.specimen-item{text-align:center}
.specimen-item img{
  width:clamp(60px,8vw,100px);margin-bottom:1rem;
  transition:transform 0.5s;
}
.specimen-item:hover img{transform:scale(1.1) rotate(-5deg)}
.specimen-item .label{
  font-size:0.65rem;letter-spacing:0.15em;
  text-transform:uppercase;opacity:0.5;
}

/* ── Inline Preview Block ── */
.preview-block{
  max-width:900px;margin:0 auto;width:100%;
}

/* ── Buttons showcase ── */
.btn-showcase{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:2rem;
}

/* ── Scroll Reveal ── */
[data-reveal]{
  opacity:0;transform:translateY(40px);
  transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),
             transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
[data-reveal].revealed{
  opacity:1;transform:translateY(0);
}

/* ── Section Header (centered) ── */
.section-header{
  text-align:center;margin-bottom:4rem;
}
.section-header .overline{
  font-size:0.68rem;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;display:block;
}
.section-header h2{
  font-family:'Gallient',serif;text-transform:uppercase;
  font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;
}
.section-header .desc{
  font-size:1.05rem;color:var(--text-body);margin-top:1rem;
  max-width:540px;margin-left:auto;margin-right:auto;line-height:1.85;
}

/* ── Asymmetric / Editorial rhythm (anti-center) ── */
.look-section.align-left{align-items:flex-start;justify-content:center;text-align:left}
.section-header.left{
  text-align:left;margin-bottom:3.5rem;max-width:720px;
  margin-left:0;margin-right:auto;
  padding-left:1.5rem;border-left:2px solid var(--accent);
}
.section-header.left .overline{margin-bottom:0.85rem}
.section-header.left .desc{
  margin-left:0;margin-right:0;max-width:540px;
}
.look-section.align-left .btn-showcase{justify-content:flex-start}
.look-section.align-left .specimen-row{justify-content:flex-start;padding-left:0}
@media(max-width:768px){
  .section-header.left{padding-left:1rem;max-width:100%}
}

/* ── Bento (asymmetric feature grid) ── */
.bento{
  display:grid;gap:1.5rem;width:100%;max-width:980px;margin:0 auto;
  grid-template-columns:1.6fr 1fr;grid-auto-rows:1fr;
}
.bento .bento-feature{
  grid-row:span 2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.6rem;text-align:center;
}
.bento .bento-feature .card-icon{width:120px;height:120px;margin-bottom:0.4rem}
.bento .bento-feature h3{font-size:clamp(1.4rem,2.2vw,2rem)}
.bento .bento-feature p{max-width:34ch;margin:0 auto}
@media(max-width:768px){
  .bento{grid-template-columns:1fr}
  .bento .bento-feature{grid-row:auto}
  .bento .bento-feature .card-icon{width:90px;height:90px}
}

/* ── Color Swatch Strip ── */
.color-strip{
  display:flex;width:100%;height:30vh;
}
.color-strip .swatch{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0.5rem;
  transition:flex 0.5s cubic-bezier(0.4,0,0.2,1);
  cursor:crosshair;
}
.color-strip .swatch:hover{flex:2}
.color-strip .swatch .name{
  font-family:'Gallient',serif;text-transform:uppercase;
  font-size:clamp(0.7rem,1.2vw,1rem);opacity:0;
  transition:opacity 0.4s;
}
.color-strip .swatch:hover .name{opacity:1}
.color-strip .swatch .hex{
  font-size:0.55rem;letter-spacing:0.2em;opacity:0;
  transition:opacity 0.4s 0.1s;
}
.color-strip .swatch:hover .hex{opacity:0.6}

/* ── Texto Destaque ── */
.statement-block{
  max-width:1150px;margin:0 auto;text-align:center;
  font-family:'Gallient',serif;
  font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1.45;
}

/* ── Grid Showcase ── */
.showcase-grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:1200px;margin:0 auto;width:100%;
}

/* ── Day Timeline (horizontal, minimalista) ── */
.day-timeline{width:100%;max-width:1000px;margin:0 auto}
.day-timeline .dt-markers{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-bottom:2.75rem;
}
.day-timeline .dt-node{position:relative;display:flex;justify-content:center;align-items:center}
.day-timeline .dt-node img{width:58px;height:58px;object-fit:contain}
/* linha em segmentos ENTRE os ícones (sem fundo/caixa) */
.day-timeline .dt-node:not(:last-child)::after{
  content:'';position:absolute;top:50%;left:calc(50% + 42px);
  width:calc(100% - 84px);height:1px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--accent) 12%,var(--accent) 88%,transparent);
}
.day-timeline .dt-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,4rem);text-align:center;
}
.day-timeline .dt-time{
  font-family:'Gallient',serif;font-size:clamp(2.2rem,4.5vw,3.4rem);
  color:var(--piv-verde);display:block;line-height:1;
}
.day-timeline .dt-label{
  font-size:0.68rem;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--accent);display:block;margin:0.95rem 0 0.7rem;
}
.day-timeline .dt-desc{
  font-size:1rem;color:var(--piv-verde);line-height:1.75;
  max-width:270px;margin:0 auto;
}
@media(max-width:680px){
  .day-timeline .dt-markers{display:none}
  .day-timeline .dt-row{grid-template-columns:1fr;gap:0}
  .day-timeline .dt-row>div{padding:2rem 0;border-bottom:1px solid rgba(202,167,120,0.22)}
  .day-timeline .dt-row>div:last-child{border-bottom:none}
}

/* ── Animation Keyframes ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes scrollLine{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  50.01%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-15px)}
}
@keyframes floatRotate{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(8deg)}
}

/* ── Footer (fechamento estilo "hero": tela cheia, branco + marca d'água central) ── */
.look-footer{
  min-height:100vh;padding:4rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;color:var(--piv-ink);
  position:relative;overflow:visible;
}
.look-footer>*:not(.parallax-texture){position:relative;z-index:1}
.look-footer img:not(.parallax-texture){height:3rem;margin-bottom:1rem}
.look-footer .date{
  font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--piv-verde);margin-bottom:2rem;
}

/* ── Responsive ── */
@media(max-width:768px){
  .dot-nav{right:1rem;gap:1rem}
  .dot-nav a .dot-label{display:none}
  .editorial-row{grid-template-columns:1fr;min-height:auto}
  .editorial-row.reverse{direction:ltr}
  .editorial-img{height:50vh}
  .look-section.pad{padding:4rem 2rem}
  .color-strip{height:auto;flex-direction:column}
  .color-strip .swatch{height:15vh;flex:none}
  .hgallery-wrap{height:50vh}
}