/* ===================================================================
   website — hero "A legacy" + fixed subscribe bar
   Loaded AFTER css/styles.css. Only adds; never edits the shared sheet.
   The carousel comes from TimeKube_Legacy_concept.html: the image never
   moves, only a mask sweeps across it, and the text stays put.
   =================================================================== */

:root{
  --lg-bar: 78px;          /* height of the fixed subscribe bar */
  --lg-text:#2b211a;       /* the brown of the concept's headline */
  --lg-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --lg-pluma: 13;          /* soft edge of the sweep, in %          */
}

/* the page has to end above the bar, or the footer hides behind it */
body.variant-4 .op4-view{ padding-bottom: var(--lg-bar); }

/* ---------- the band ---------- */
.lg{
  position:relative; width:100%;
  height:calc(100svh - var(--nav-h) - var(--lg-bar));
  min-height:380px; overflow:hidden; background:#f2ece3;
  color:var(--lg-text);
}
/* The frame exists so two masks don't fight: the vertical one (narrow
   screens) lives here and the horizontal sweep lives on each image.
   The photo keeps its 2.40:1 and sticks to the RIGHT: on a wider window
   a cream strip is left on the left, on a taller one the left margin is
   what gets cropped — never the subject. */
.lg-frame{position:absolute;top:0;right:0;height:100%;width:auto;aspect-ratio:2.4/1}
.lg-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
          opacity:0;will-change:opacity,-webkit-mask-image}
.lg-scene.on{opacity:1;z-index:1}
.lg-scene.in{opacity:1;z-index:2}

/* ---------- the text: fixed, never animated ---------- */
.lg-copy{position:absolute;left:5%;top:18.5%;z-index:5;width:40%;pointer-events:none}
.lg-copy h1{margin:0;font-family:var(--lg-serif);font-weight:400;
            font-size:3.75vw;line-height:1.18;letter-spacing:-.005em;color:var(--lg-text)}
.lg-copy h1 .line{display:block;white-space:nowrap}
.lg-copy h1 .lg-accent{color:var(--w-blue,#4aa8e8)}
.lg-rule{width:3.1vw;height:1px;background:rgba(43,33,26,.55);margin:1.5vw 0 1.1vw}
.lg-copy p{margin:0;font-size:1.22vw;line-height:1.45;color:#3d3128;font-weight:400}

/* ---------- lockup ---------- */
.lg-mark{position:absolute;left:5%;bottom:7%;z-index:5;width:14.5%;min-width:118px}
.lg-lockup{width:100%;display:block}
.lg-claim{display:block;padding-left:25.5%;font-size:.58vw;letter-spacing:.2em;color:#5f5245;
          font-weight:600;margin-top:.45vw;white-space:nowrap}

/* ---------- dots ---------- */
.lg-dots{position:absolute;right:3%;bottom:7.5%;z-index:6;display:flex;gap:9px}
.lg-dots b{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.35);
  transition:background .3s,transform .3s}
.lg-dots b.on{background:#fff;transform:scale(1.3)}

@media (max-width:820px){
  /* Narrow: the JS sizes the band to text + whole photo + plinth, so the
     photo is seen ENTIRE and the logo never sits on top of it. */
  .lg{height:auto}
  .lg-scene{object-position:center center}
  .lg-frame{top:var(--tope,42%);height:var(--fotoAlto,58%);bottom:auto;left:0;right:0;width:auto;
    aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--llena,12%));
            mask-image:linear-gradient(to bottom, transparent 0, #000 var(--llena,12%))}
  .lg-copy{top:24px;width:84%}
  .lg-copy h1{font-size:7.4vw}
  .lg-rule{width:9vw;margin:3.4vw 0 2.6vw}
  .lg-copy p{font-size:3.3vw}
  .lg-mark{width:38%;left:5%;bottom:14px}
  .lg-claim{font-size:1.9vw;margin-top:1.2vw}
  .lg-dots{bottom:24px;right:5%}
  .lg-dots b{width:6px;height:6px;background:rgba(60,45,32,.3);box-shadow:none}
  .lg-dots b.on{background:rgba(60,45,32,.75)}
}

/* ===================================================================
   the fixed subscribe bar — always on screen, never scrolls away
   =================================================================== */
.subbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:var(--lg-bar);
  display:flex; align-items:center; gap:clamp(14px,2vw,28px);
  padding:0 clamp(20px,5vw,88px);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--w-line);
  box-shadow:0 -6px 24px rgba(8,8,48,.06);
  font-family:'Geist', system-ui, sans-serif;
}
/* Sin entrada: la barra y su contenido estan desde el primer frame. Cualquier
   cosa que apareciera dejaba ver, mientras tanto, la seccion siguiente cortada.
*/

/* La invitacion va PRIMERO: se lee el porque y despues el campo. Reusa la
   clave op4_cta, que ya estaba traducida a los once idiomas. */
.subbar-lead{
  flex:none; margin:0;
  font-size:clamp(15px,1.15vw,18px); font-weight:500; letter-spacing:-.01em;
  color:var(--w-ink); white-space:nowrap;
}
.subbar-form{
  display:flex; align-items:center; gap:8px;
  width:100%; max-width:520px;
  background:#fff; border:1px solid var(--w-line); border-radius:999px;
  padding:5px 5px 5px 20px;
}
.subbar-form input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:16px; color:var(--w-ink); padding:10px 0;
}
.subbar-form input::placeholder{ color:#9a978f; }
/* Los botones Subscribe no tienen adonde scrollear: la barra ya esta en
   pantalla. Asi que el foco va al campo y el campo se enciende un momento,
   para que el clic no caiga en el vacio. */
.subbar-form{ transition:box-shadow .25s ease, border-color .25s ease }
.subbar.ping .subbar-form{ box-shadow:0 0 0 4px rgba(74,168,232,.28); border-color:var(--w-blue) }
.subbar-form button{
  flex:none; border:none; cursor:pointer; background:var(--w-ink); color:#fff;
  font-family:inherit; font-size:15px; font-weight:500; letter-spacing:-.01em;
  padding:12px 26px; border-radius:999px; white-space:nowrap; transition:background .18s ease;
}
.subbar-form button:hover{ background:#1c1c5e; }
.subbar-form button:disabled{ opacity:.6; cursor:default; }
.subbar .err{ margin-top:0; font-size:13px; color:#d15b5b; }

/* El latido: 4 s quieto y 2 s de transicion — 1 s para irse, 1 s para volver.
   Ciclo de 6 s. Se corta apenas el visitante toca la barra o entra al campo:
   ya esta adentro, no hay nada que recordarle. */
@keyframes leadPulse{
  0%, 66.7% { opacity:1 }
  83.3%     { opacity:0 }
  100%      { opacity:1 }
}
.subbar-lead{ animation:leadPulse 6s ease-in-out 1s infinite }
.subbar:focus-within .subbar-lead, .subbar:hover .subbar-lead{ animation:none }

@media (prefers-reduced-motion: reduce){
  .subbar-lead{ animation:none }
}

@media (max-width:640px){
  :root{ --lg-bar: 70px; }
  /* en el telefono no entran las dos cosas: manda el campo */
  .subbar-lead{ display:none }
  .subbar{ padding:0 16px; gap:10px }
  .subbar-form{ padding:4px 4px 4px 16px }
  .subbar-form input{ font-size:15px; padding:9px 0 }
  .subbar-form button{ padding:11px 18px; font-size:14px }
  /* on a phone there is no room for the message beside the field */
  .subbar .err{ position:absolute; left:16px; right:16px; bottom:calc(100% + 6px);
    background:#fff; border:1px solid var(--w-line); border-radius:10px; padding:7px 11px }
}