/* ============================================================
   FRANCIZOR.RO — Cinematic intro "Povestea marilor români"
   ============================================================ */
#intro{position:fixed;inset:0;z-index:9999;background:
  radial-gradient(1200px 800px at 50% 42%,rgba(20,33,62,.9),transparent 60%),
  radial-gradient(900px 700px at 50% 120%,rgba(201,162,39,.10),transparent 60%),
  #050a15;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  transition:opacity 1.1s var(--ease);will-change:opacity}
#intro.done{opacity:0;pointer-events:none}
html.intro-lock{overflow:hidden}
#intro-bg{position:absolute;inset:0;z-index:0;pointer-events:none}

/* letterbox */
.lb{position:absolute;left:0;right:0;height:9vh;background:#03060d;z-index:5;
  transition:transform 1s var(--ease);pointer-events:none}
.lb::after{content:"";position:absolute;height:1px;left:0;right:0;background:linear-gradient(90deg,transparent,rgba(201,162,39,.4),transparent)}
.lb-top{top:0;transform:translateY(0)}.lb-top::after{bottom:0}
.lb-bot{bottom:0;transform:translateY(0)}.lb-bot::after{top:0}
#intro.open .lb-top{transform:translateY(-100%)}
#intro.open .lb-bot{transform:translateY(100%)}

/* skip */
.intro-skip{position:absolute;top:max(22px,9vh);right:26px;z-index:8;transform:translateY(14px);
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;padding:9px 16px;border-radius:4px;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .3s}
.intro-skip:hover{color:#fff;border-color:var(--gold);background:rgba(201,162,39,.08)}
.intro-skip span{transition:transform .3s var(--ease)}.intro-skip:hover span{transform:translateX(3px)}

/* stage + scenes */
.intro-stage{position:relative;z-index:4;width:min(760px,90vw);text-align:center}
.scene{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  opacity:0;pointer-events:none;filter:blur(6px)}
.scene.active{opacity:1;filter:blur(0);transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease)}
.scene.leaving{opacity:0;filter:blur(8px);transform:translateY(calc(-50% - 26px));transition:opacity .7s var(--ease),filter .7s,transform .7s var(--ease)}

.s-era{font-family:var(--sans);font-size:clamp(11px,1.3vw,13px);font-weight:600;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold-soft);opacity:0;transform:translateY(10px)}
.scene.active .s-era{opacity:.95;transform:none;transition:all .8s var(--ease) .2s}

.s-emblem{width:clamp(120px,16vw,168px);height:clamp(120px,16vw,168px);margin:26px auto 30px;position:relative}
.s-emblem svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 14px rgba(201,162,39,.45))}
.s-emblem svg path,.s-emblem svg line,.s-emblem svg circle,.s-emblem svg polygon{stroke:#e6c659;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.s-emblem svg .fillgold{fill:var(--gold);stroke:none}
.s-emblem::after{content:"";position:absolute;inset:-30%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 65%);z-index:-1;
  opacity:0;animation:none}
.scene.active .s-emblem::after{animation:emGlow 3s ease-in-out infinite}
@keyframes emGlow{0%,100%{opacity:.4}50%{opacity:.9}}

.s-name{font-family:var(--serif);font-weight:600;font-size:clamp(38px,6.4vw,76px);line-height:1;
  letter-spacing:-.02em;color:#fff;opacity:0;transform:translateY(18px)}
.s-name .g{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.scene.active .s-name{opacity:1;transform:none;transition:all .9s var(--ease) .35s}

.s-desc{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.1vw,24px);color:var(--muted);
  margin-top:18px;opacity:0;transform:translateY(14px)}
.scene.active .s-desc{opacity:1;transform:none;transition:all .9s var(--ease) .5s}

/* the franchise tie-in — a few words linking each figure to franchising */
.s-franchise{position:relative;font-family:var(--sans);font-size:clamp(12.5px,1.5vw,15.5px);font-weight:500;
  letter-spacing:.012em;color:var(--gold-soft);margin-top:24px;padding-top:18px;
  opacity:0;transform:translateY(12px)}
.s-franchise::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.scene.active .s-franchise{opacity:.96;transform:none;transition:all .9s var(--ease) .68s}

/* finale */
.scene.finale .fin-wm{font-family:var(--serif);font-weight:700;font-size:clamp(46px,8.5vw,104px);
  letter-spacing:.01em;color:#fff;line-height:1}
.scene.finale .fin-wm .ro{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fin-flag{height:5px;width:0;margin:26px auto 0;border-radius:3px;overflow:hidden;display:flex}
.scene.finale.active .fin-flag{width:min(220px,60vw);transition:width 1s var(--ease) .6s}
.fin-flag i{flex:1}.fin-flag i:nth-child(1){background:var(--ro-blue)}.fin-flag i:nth-child(2){background:var(--ro-yellow)}.fin-flag i:nth-child(3){background:var(--ro-red)}
.fin-sub{font-family:var(--sans);font-size:clamp(12px,1.4vw,15px);letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted-2);margin-top:24px;opacity:0}
.scene.finale.active .fin-sub{opacity:1;transition:opacity 1s ease .9s}

/* timeline */
.intro-timeline{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(9vh + 30px);z-index:6;
  width:min(680px,82vw);height:30px;display:flex;align-items:center;opacity:0;transition:opacity .8s .4s}
#intro.open .intro-timeline,#intro.tl-on .intro-timeline{opacity:1}
.tl-track{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(201,162,39,.18)}
.tl-fill{position:absolute;left:0;top:50%;height:1px;width:0;background:var(--gold-grad);
  box-shadow:0 0 10px rgba(201,162,39,.7);transition:width .9s var(--ease)}
.tl-dots{position:relative;width:100%;display:flex;justify-content:space-between}
.tl-dot{width:7px;height:7px;border-radius:50%;background:rgba(201,162,39,.25);position:relative;transition:all .4s var(--ease)}
.tl-dot.on{background:var(--gold);box-shadow:0 0 12px var(--gold-bright);transform:scale(1.5)}
.tl-dot .yr{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-family:var(--sans);
  font-size:9.5px;letter-spacing:.08em;color:var(--muted-2);white-space:nowrap;opacity:0;transition:opacity .4s}
.tl-dot.on .yr{opacity:1;color:var(--gold-soft)}

@media(max-width:680px){
  .intro-timeline{bottom:calc(9vh + 20px)}
  .tl-dot .yr{display:none}
  .intro-skip{top:max(16px,9vh)}
}
@media(prefers-reduced-motion:reduce){
  #intro{display:none}
}