/* ============================================================
   INVITACIÓN VANESSA & FABRIZIO — Sistema de diseño
   Cine vintage × Boho otoñal
   ============================================================ */

/* ---- Fuentes propias ---- */
@font-face{
  font-family:'Symphony';
  src:url('assets/fonts/Symphony.otf') format('opentype');
  font-display:swap;
}
@font-face{
  font-family:'Beelova';
  src:url('assets/fonts/Beelova.otf') format('opentype');
  font-display:swap;
}

:root{
  /* Paleta otoñal boho */
  --cream:      #ece1cd;
  --cream-2:    #f4ecda;
  --cream-3:    #e3d4ba;
  --ink:        #2b1d15;
  --ink-soft:   #4a342600;
  --burdeos:    #5e1f26;
  --burdeos-2:  #4a1820;
  --terracota:  #bf4a2f;
  --cobre:      #b56a33;
  --oliva:      #5c5e30;
  --oliva-2:    #43471f;
  --rosa:       #c98b7c;
  --camel:      #c08a42;
  --mostaza:    #c8932e;
  --night:      #1b1310;
  --night-2:    #241913;
  --night-3:    #2e2018;

  --paper-text: #3a281d;
  --paper-soft: #6b5039;

  /* Tipos */
  --f-script: 'Symphony', cursive;
  --f-marker: 'Beelova', sans-serif;
  --f-serif:  'Cormorant Garamond', Georgia, serif;
  --f-type:   'Special Elite', 'Courier New', monospace;

  --maxw: 640px; /* ancho de lectura móvil */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--night);
  color:var(--paper-text);
  font-family:var(--f-serif);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}

/* ============================================================
   STAGE / SCROLL
   ============================================================ */
#film{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  overflow:hidden;
  box-shadow:0 0 120px rgba(0,0,0,.6);
}

.scene{
  position:relative;
  min-height:100svh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 30px;
  overflow:hidden;
  isolation:isolate;
}
.scene__inner{
  position:relative;
  width:100%;
  max-width:460px;
  margin:0 auto;
  text-align:center;
  z-index:3;
}

/* Fondos por tipo de escena */
.scene--night{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(94,31,38,.35), transparent 60%),
    radial-gradient(100% 70% at 50% 110%, rgba(92,94,48,.22), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 50%, var(--night) 100%);
  color:#ecdcc2;
}
.scene--burgundy{
  background:
    radial-gradient(120% 90% at 50% 10%, #6c2630 0%, var(--burdeos) 38%, var(--burdeos-2) 100%);
  color:#f0dcc4;
}
.scene--cream{
  background:
    radial-gradient(110% 80% at 50% 0%, var(--cream-2) 0%, var(--cream) 55%, var(--cream-3) 100%);
  color:var(--paper-text);
}
.scene--olive{
  background:
    radial-gradient(120% 90% at 50% 0%, #6a6c38 0%, var(--oliva) 45%, var(--oliva-2) 100%);
  color:#f1e7cf;
}

/* Paper grain on cream scenes */
.scene--cream::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.05;
}

/* ============================================================
   OVERLAYS FIJOS (grano de película, viñeta)
   ============================================================ */
#grain,#vignette,#scratches{
  position:fixed;inset:0;pointer-events:none;z-index:60;
}
#grain{
  z-index:61;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grain .5s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(2%,2%)}
}
#vignette{
  z-index:62;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.32) 100%);
}
@media (prefers-reduced-motion: reduce){
  #grain{animation:none;}
}

/* Canvas de hojas cayendo */
#leaves{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:55;
}

/* ============================================================
   AUDIO BUTTON (flotante, siempre visible)
   ============================================================ */
#audio-btn{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(236,220,194,.5);
  background:rgba(27,19,16,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  color:#ecdcc2;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  transition:transform .25s ease, background .25s;
}
#audio-btn:hover{transform:scale(1.07);}
#audio-btn:active{transform:scale(.94);}
#audio-btn svg{width:22px;height:22px;}
#audio-btn .eq{display:none;}
#audio-btn.playing .eq{display:flex;}
#audio-btn.playing .ic-music{display:none;}
.eq{gap:2.5px;align-items:flex-end;height:18px;}
.eq span{width:3px;background:currentColor;border-radius:2px;animation:eq 1s ease-in-out infinite;}
.eq span:nth-child(1){height:6px;animation-delay:0s}
.eq span:nth-child(2){height:14px;animation-delay:.2s}
.eq span:nth-child(3){height:9px;animation-delay:.4s}
.eq span:nth-child(4){height:16px;animation-delay:.1s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
#audio-tip{
  position:fixed;right:74px;bottom:30px;z-index:80;
  font-family:var(--f-type);font-size:11px;letter-spacing:.04em;
  color:#ecdcc2;background:rgba(27,19,16,.8);
  padding:7px 11px;border-radius:20px;white-space:nowrap;
  border:1px solid rgba(236,220,194,.25);
  opacity:0;transform:translateX(8px);transition:opacity .4s,transform .4s;
  pointer-events:none;
}
#audio-tip.show{opacity:1;transform:translateX(0);}

/* Progreso de rollo (barra lateral) */
#reel{
  position:fixed;left:10px;top:50%;transform:translateY(-50%);
  z-index:70;display:flex;flex-direction:column;gap:9px;
}
#reel a{
  width:7px;height:7px;border-radius:50%;
  background:rgba(180,150,110,.35);
  border:1px solid rgba(180,150,110,.2);
  transition:all .3s;
}
#reel a.active{background:var(--terracota);transform:scale(1.5);box-shadow:0 0 8px rgba(191,74,47,.6);}
@media (max-width:520px){ #reel{left:6px;} }

/* ============================================================
   TIPOGRAFÍA / COMPONENTES COMUNES
   ============================================================ */
.kicker{
  font-family:var(--f-type);
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  opacity:.7;margin-bottom:18px;
}
.cue{ /* etiqueta tipo "rótulo de cine" */
  font-family:var(--f-type);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;opacity:.78;
}
.cue::before,.cue::after{content:"";width:26px;height:1px;background:currentColor;opacity:.5;}

.script{ font-family:var(--f-script); line-height:.95; }
.marker{ font-family:var(--f-marker); line-height:1; }

.names{
  font-family:var(--f-script);
  font-size:clamp(54px,15vw,86px);
  line-height:.9;
  font-weight:400;
}
.amp{ font-size:.7em;opacity:.8;font-style:italic; }

.date-strip{
  font-family:var(--f-type);
  letter-spacing:.3em;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.date-strip::before,.date-strip::after{content:"";height:1px;width:34px;background:currentColor;opacity:.45;}

.lead{
  font-size:clamp(20px,5.4vw,26px);
  line-height:1.5;
  font-weight:500;
}
.body{
  font-size:clamp(17px,4.4vw,19px);
  line-height:1.62;
  color:inherit;
}
.muted{opacity:.72;}

.fx-line{ /* línea botánica divisoria */
  width:120px;height:1px;margin:26px auto;
  background:linear-gradient(90deg,transparent,currentColor,transparent);
  opacity:.4;
}

/* Doodle helpers */
.doodle{pointer-events:none;user-select:none;}
.doodle--ink{ filter:none; }

/* Botón principal */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-type);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;border-radius:40px;
  background:var(--burdeos);color:#f3e3cb;
  border:1px solid rgba(243,227,203,.25);
  text-decoration:none;
  transition:transform .2s, box-shadow .2s, background .2s;
  box-shadow:0 8px 22px rgba(94,31,38,.35);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(94,31,38,.45);}
.btn:active{transform:translateY(0);}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor;box-shadow:none;}
.btn--ghost:hover{background:rgba(0,0,0,.06);}

/* ============================================================
   REVEAL ANIMATIONS (scroll-triggered)
   ============================================================ */
[data-rise],[data-fade],[data-grow],[data-pop],[data-draw path]{
  will-change:transform,opacity;
}
[data-rise]{opacity:0;transform:translateY(38px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
[data-fade]{opacity:0;transition:opacity 1.1s ease;}
[data-pop]{opacity:0;transform:scale(.82);transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.56,.64,1);}
[data-grow]{opacity:0;transform:translateY(20px) scale(.96);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1);}
.in [data-rise],.in[data-rise]{opacity:1;transform:translateY(0);}
.in [data-fade],.in[data-fade]{opacity:1;}
.in [data-pop],.in[data-pop]{opacity:1;transform:scale(1);}
.in [data-grow],.in[data-grow]{opacity:1;transform:translateY(0) scale(1);}

/* SVG draw (ramas creciendo) */
[data-draw] path{
  stroke-dasharray:var(--len,1000);
  stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1.8s cubic-bezier(.5,0,.2,1);
}
.in [data-draw] path{stroke-dashoffset:0;}

/* Floating sway for decorative doodles */
@media (prefers-reduced-motion: no-preference){
  .sway{animation:sway 6s ease-in-out infinite;}
  @keyframes sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}
  .breathe{animation:breathe 5s ease-in-out infinite;}
  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
}