/* ============================================================
   ROAR! FOIL TAKEOVER — launch interstitial for the
   10m Scarily Strong Non-Stick Foil (August 2026)
   Reuses the brand "teeth" seam as a foil tear-strip.
   Loads after styles.css, so brand font vars are available.
   ============================================================ */
.foil-takeover{
  --ft-green:#A2D302;      /* matches the live site's inline green */
  --ft-green-deep:#0E7B3C; /* readable green on the light foil panel */
  --ft-ink:#0B0F0C;
  --ft-paper:#F4F3E9;
  position:fixed; inset:0; z-index:9000;
  overflow:hidden; background:var(--ft-ink);
  opacity:1; transition:opacity .5s ease;
  user-select:none; -webkit-user-select:none;
}
.foil-takeover.is-closing{ opacity:0; pointer-events:none; }
.foil-takeover[hidden]{ display:none; }

/* ---------- the revealed announcement (sits BEHIND the foil) ---------- */
.ft__panel{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center; overflow-y:auto;
  padding:clamp(64px,7vw,80px) clamp(20px,5vw,64px) clamp(76px,7vw,88px);
  color:var(--ft-ink);
  /* smooth, shiny brushed-free metal — light enough for dark text to read */
  background:
    radial-gradient(85% 60% at 84% -8%, rgba(162,211,2,.2) 0%, transparent 55%),
    linear-gradient(116deg, transparent 28%, rgba(255,255,255,.55) 47%, transparent 61%),
    linear-gradient(125deg,
      #d6dbe0 0%, #f3f5f7 18%, #c6ccd2 37%, #fbfcfd 52%,
      #cad0d6 67%, #eef1f3 84%, #d2d7dc 100%);
}
.ft__inner{
  width:min(1220px,100%); margin-block:auto; position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(40px,7vw,104px); align-items:center;
}

/* left column */
.ft__eyebrow{
  font-family:var(--mono); font-weight:700; font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ft-green-deep);
  display:inline-flex; align-items:center; gap:11px;
}
.ft__eyebrow::before{ content:""; width:30px; height:2px; background:var(--ft-green-deep); display:block; }
.ft__title{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  letter-spacing:-.025em; line-height:.86;
  font-size:clamp(64px,9.5vw,148px); margin:20px 0 0;
}
.ft__title .pop{ color:var(--ft-green-deep); }
.ft__lede{
  font-size:clamp(16px,1.5vw,20px); line-height:1.5; font-weight:500;
  color:rgba(11,15,12,.78); max-width:46ch; margin-top:24px; text-wrap:pretty;
}
.ft__lede b{ color:var(--ft-ink); font-weight:800; }

/* claims chips */
.ft__chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.ft__chip{
  font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ft-ink);
  border:1.5px solid rgba(11,15,12,.32); border-radius:99px; padding:8px 15px;
}
.ft__chip span{ color:var(--ft-green-deep); }

/* now live at — retailer logos */
.ft__live{ margin-top:30px; }
.ft__live-lab{
  display:block; font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(11,15,12,.58);
}
.ft__live-logos{ display:flex; align-items:center; gap:clamp(18px,2.6vw,36px); margin-top:16px; }
.ft__live-logos img{
  height:clamp(38px,4.6vw,60px); width:auto; max-width:100%; object-fit:contain;
  filter:brightness(0); opacity:.88; -webkit-user-drag:none;
}
/* these two carry more transparent padding in the source art — scale up so the
   printed marks read at the same visual size as the Asda logo */
.ft__live-logos img.ft__live-logo--morrisons{ height:clamp(58px,7.1vw,93px); }
.ft__live-logos img.ft__live-logo--amazon{ height:clamp(44px,5.3vw,69px); }

/* countdown (retired — kept harmless) */
.ft__count{ display:flex; gap:clamp(10px,1.6vw,18px); margin-top:30px; }
.ft__count-cell{ text-align:left; }
.ft__count-num{
  font-family:var(--display); font-weight:900; font-variant-numeric:tabular-nums;
  font-size:clamp(38px,5vw,66px); line-height:.9; letter-spacing:-.02em; color:var(--ft-ink);
}
.ft__count-lab{
  font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(11,15,12,.55); margin-top:9px;
}
.ft__count-sep{
  font-family:var(--display); font-weight:900; font-size:clamp(30px,4vw,52px);
  color:var(--ft-green-deep); align-self:flex-start; line-height:1; margin-top:2px;
}

/* CTAs */
.ft__cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

/* close */
.ft__close{
  position:absolute; top:clamp(16px,2.4vw,28px); right:clamp(16px,2.4vw,28px); z-index:6;
  width:50px; height:50px; border-radius:50%;
  border:2px solid rgba(11,15,12,.4); background:transparent; color:var(--ft-ink);
  font-size:24px; line-height:1; display:grid; place-items:center;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
}
.ft__close:hover{ background:var(--ft-green); color:var(--ft-ink); border-color:var(--ft-green); transform:rotate(90deg); }

/* right column — foil pack on a pedestal */
.ft__pack{ position:relative; display:flex; align-items:center; justify-content:center; }
.ft__pack::after{
  content:""; position:absolute; left:48%; bottom:4%; transform:translateX(-50%);
  width:60%; height:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.32), transparent 72%); z-index:0;
}
.ft__pack img{
  width:100%; max-width:700px; height:auto; display:block;
  position:relative; z-index:1;
  -webkit-user-drag:none; user-select:none;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.34)) drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.ft__brand-logo{ -webkit-user-drag:none; }
.ft__pack-badge{
  position:absolute; top:14px; right:14px; z-index:3;
  font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:.04em;
  font-size:13px; background:var(--ft-green); color:var(--ft-ink);
  padding:8px 13px; border-radius:99px; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.ft__pack-tag{
  position:absolute; left:14px; bottom:14px; z-index:3;
  font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  font-size:14px; background:var(--ft-ink); color:var(--ft-paper);
  padding:9px 14px; border-radius:8px; border:1.5px solid rgba(244,243,233,.18);
}

/* ---------- the foil sheets (cover the screen, then tear apart) ---------- */
.ft__sheet{
  position:absolute; inset:0; z-index:3; overflow:hidden; will-change:transform; cursor:grab;
  touch-action:none;
  background:
    repeating-linear-gradient(97deg, rgba(255,255,255,.07) 0 3px, rgba(0,0,0,.05) 3px 6px),
    repeating-linear-gradient(81deg, rgba(255,255,255,.06) 0 8px, rgba(0,0,0,.035) 8px 13px),
    linear-gradient(132deg,
      #c0c6cd 0%, #eef1f4 14%, #a9afb7 30%, #f6f8fa 48%,
      #b2b9c0 64%, #e7eaed 80%, #bbc1c8 100%);
  background-blend-mode:overlay, overlay, normal;
  box-shadow:inset 0 0 180px rgba(0,0,0,.18);
}
/* travelling sheen */
.ft__sheet::after{
  content:""; position:absolute; top:-25%; bottom:-25%; left:-45%; width:42%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.72), transparent);
  transform:skewX(-12deg); filter:blur(7px); pointer-events:none;
  animation:ft-sheen 2.7s ease-in-out .15s 1 both;
}
.ft__sheet--top{ z-index:3; transition:transform 1.2s cubic-bezier(.76,0,.24,1); }
.ft__sheet--bottom{ z-index:2; transition:transform 1.2s cubic-bezier(.76,0,.24,1); }
.is-torn .ft__sheet--top{ transform:translateY(-101%); }
.is-torn .ft__sheet--bottom{ transform:translateY(101%); }
.foil-takeover.is-dragging .ft__sheet{ cursor:grabbing; }
/* while the user is dragging, sheets + seam track the pointer with no easing */
.foil-takeover.is-dragging .ft__sheet--top,
.foil-takeover.is-dragging .ft__sheet--bottom,
.foil-takeover.is-dragging .ft__seam{ transition:none; }
@keyframes ft-sheen{ from{ left:-45%; } to{ left:135%; } }

/* ---------- seam furniture: embossed brand + tear strip ---------- */
.ft__seam{
  position:absolute; inset:0; z-index:4; pointer-events:none; touch-action:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(16px,2.4vw,28px);
  transition:opacity .45s ease, transform .7s cubic-bezier(.76,0,.24,1);
}
.is-torn .ft__seam{ opacity:0; transform:scale(1.32); }
.ft__brand-logo{
  width:min(58vw,560px); height:auto; display:block;
  opacity:.9; mix-blend-mode:multiply;
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,.72))
    drop-shadow(0 -1.5px 0 rgba(0,0,0,.22))
    drop-shadow(0 20px 32px rgba(0,0,0,.12));
}
.ft__tear{
  font-family:var(--mono); font-weight:700; font-size:clamp(11px,1.4vw,15px);
  letter-spacing:.3em; text-transform:uppercase; color:rgba(11,15,12,.6);
  border:2px dashed rgba(11,15,12,.4); border-radius:99px; padding:11px 20px;
  background:rgba(244,243,233,.4); backdrop-filter:blur(2px);
  pointer-events:auto; cursor:grab;
  animation:ft-pull 1.15s ease-in-out infinite;
}
.foil-takeover.is-dragging .ft__tear{ cursor:grabbing; }
@keyframes ft-pull{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(4px); } }

/* ---------- staggered content entrance ---------- */
.ft__rise{ opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.content-in .ft__rise{ opacity:1; transform:none; }
.content-in .ft__rise:nth-child(1){ transition-delay:.04s; }
.content-in .ft__rise:nth-child(2){ transition-delay:.12s; }
.content-in .ft__rise:nth-child(3){ transition-delay:.2s; }
.content-in .ft__rise:nth-child(4){ transition-delay:.28s; }
.content-in .ft__rise:nth-child(5){ transition-delay:.36s; }
.content-in .ft__rise:nth-child(6){ transition-delay:.44s; }
/* pack fades + rises IN SYNC with the text on tear */
.ft__pack{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.content-in .ft__pack{ opacity:1; transform:none; transition-delay:.12s; }

/* ---------- short viewports (laptop Chrome at 100%) ----------
   The reveal has to fit the window with no scrolling, so on limited height
   everything scales off vh instead of vw. */
@media (min-width:921px) and (max-height:900px){
  .ft__panel{ padding:clamp(44px,6vh,72px) clamp(20px,4vw,56px) clamp(48px,6vh,76px); }
  .ft__inner{ gap:clamp(26px,4vw,72px); }
  .ft__title{ font-size:clamp(46px,7.6vh,112px); margin-top:14px; }
  .ft__lede{ font-size:clamp(14px,2vh,18px); margin-top:16px; max-width:42ch; }
  .ft__chips{ margin-top:16px; gap:7px; }
  .ft__chip{ font-size:11px; padding:6px 12px; }
  .ft__live{ margin-top:18px; }
  .ft__live-logos{ margin-top:11px; gap:clamp(16px,2.2vw,30px); }
  .ft__live-logos img{ height:clamp(26px,4.3vh,50px); }
  .ft__live-logos img.ft__live-logo--morrisons{ height:clamp(40px,6.6vh,78px); }
  .ft__live-logos img.ft__live-logo--amazon{ height:clamp(30px,5vh,58px); }
  .ft__cta{ margin-top:22px; gap:12px; }
  .ft__cta .btn--lg{ padding:15px 26px; font-size:15px; }
  .ft__pack img{ width:auto; max-width:100%; max-height:66vh; }
  .ft__close{ width:42px; height:42px; font-size:21px; }
}
@media (min-width:921px) and (max-height:740px){
  .ft__title{ font-size:clamp(40px,7.2vh,84px); }
  .ft__lede{ margin-top:13px; }
  .ft__chips{ margin-top:13px; }
  .ft__live{ margin-top:15px; }
  .ft__cta{ margin-top:18px; }
  .ft__cta .btn--lg{ padding:13px 22px; font-size:14px; }
  .ft__pack img{ max-height:62vh; }
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .ft__inner{ grid-template-columns:1fr; gap:clamp(28px,7vw,44px); }
  .ft__pack{ order:-1; }
  .ft__pack img{ width:min(560px,92vw); }
  .ft__panel{ padding-top:clamp(74px,12vw,96px); }
}
@media (max-width:560px){
  .ft__live-logos{ gap:16px; }
  .ft__live-logos img{ height:30px; }
  .ft__live-logos img.ft__live-logo--morrisons{ height:46px; }
  .ft__live-logos img.ft__live-logo--amazon{ height:35px; }
  .ft__count{ gap:10px; }
  .ft__count-sep{ display:none; }
  .ft__cta{ width:100%; }
  .ft__cta .btn{ flex:1 1 auto; justify-content:center; }
}

/* ---------- reduced motion: no tear, content shown instantly ---------- */
@media (prefers-reduced-motion:reduce){
  .ft__sheet::after{ animation:none; opacity:0; }
  .ft__tear{ animation:none; }
  .ft__sheet--top,.ft__sheet--bottom,.ft__seam{ transition:none; }
  .ft__rise,.content-in .ft__pack{ transition:none; }
}