/**
 * frame.css — Section Frame envelope for shawnprestonmagic.com
 * -----------------------------------------------------------------------------
 * Extracted standalone from frame-demo.html. Loaded ONCE (editor + front end)
 * by sp-blocks.php. This file owns the whole envelope: tone, edge angles, the
 * auto crimson seam, glow, and the 1440 content cap.
 *
 * Pattern blocks NEVER re-declare any of this. They render only the markup that
 * goes inside .sp-frame__inner and let the frame do the framing.
 *
 * The clever bit: four corner offsets (--tl --tr --bl --br) are read by BOTH the
 * section clip-path AND the crimson seam, so shape + seam always move together.
 * Every angle on the site is the single fixed --sp-ang pitch, so edges tessellate.
 */

:root{
  /* tone families — black rests, blue is where the eye lands.
     base/raised stay neutral black; slate/feature carry the blue. */
  --sp-ink:#0A0B0D;        /* tone: base    — black, deepest    */
  --sp-ink-2:#0E1117;      /* tone: raised  — black, gentle lift */
  --sp-slate:#0F1622;      /* tone: slate   — blue, subtle       */
  --sp-feature:#16233D;    /* tone: feature — navy, focus plane  */
  --sp-crimson:#E03131;
  --sp-bone:#F4F1EC;
  --sp-muted:#9AA0AB;
  --sp-tungsten:#E9C9A0;

  --sp-maxw:1440px;        /* content cap (Extract pattern) */
  --sp-ang:72px;           /* fixed angle pitch — identical everywhere so edges tessellate */
  --sp-seam:3px;           /* crimson seam thickness */

  --sp-pad-x:clamp(20px,5vw,72px);
  --sp-pad-y:clamp(56px,7vw,104px);
}

/* ---- frame shell --------------------------------------------------------- */
.sp-frame{
  position:relative;
  isolation:isolate;
  /* four corner offsets drive BOTH the clip-path and the seam.
     NOTE: zeros MUST carry a unit (0px, not 0) — the seam clip-path adds
     --sp-seam to these via calc(), and calc() rejects unitless-0 + length. */
  --tl:0px; --tr:0px; --bl:100%; --br:100%;
  clip-path:polygon(0 var(--tl), 100% var(--tr), 100% var(--br), 0 var(--bl));
}

/* ---- tone ---------------------------------------------------------------- */
.sp-frame--tone-base{background:var(--sp-ink)}
.sp-frame--tone-raised{background:var(--sp-ink-2)}
.sp-frame--tone-slate{background:var(--sp-slate)}
.sp-frame--tone-feature{background:var(--sp-feature)}

/* ---- edges — flat / lean-right (\) / lean-left (/), per edge -------------
   An angled TOP pulls the section up by one --sp-ang (negative margin) so it
   tucks under the section above; their edges resolve to a single shared line.
   Adjacent angled edges must share direction to tessellate cleanly.        */
.sp-frame--top-lr{--tl:0px;--tr:var(--sp-ang);margin-top:calc(var(--sp-ang) * -1)}
.sp-frame--top-ll{--tl:var(--sp-ang);--tr:0px;margin-top:calc(var(--sp-ang) * -1)}
.sp-frame--bottom-lr{--bl:calc(100% - var(--sp-ang));--br:100%}
.sp-frame--bottom-ll{--bl:100%;--br:calc(100% - var(--sp-ang))}

/* ---- crimson seam — printed in markup ONLY on an angled edge, reads the
   same corner vars so it always tracks the clip exactly. ------------------ */
.sp-frame__seam{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--sp-crimson)}
.sp-frame__seam--top{
  clip-path:polygon(
    0 var(--tl),
    100% var(--tr),
    100% calc(var(--tr) + var(--sp-seam)),
    0 calc(var(--tl) + var(--sp-seam))
  );
}
.sp-frame__seam--bottom{
  clip-path:polygon(
    0 calc(var(--bl) - var(--sp-seam)),
    100% calc(var(--br) - var(--sp-seam)),
    100% var(--br),
    0 var(--bl)
  );
}

/* ---- glow — independent field, combines with any edge treatment ---------- */
.sp-frame--glow-spotlight::after,
.sp-frame--glow-hot::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.sp-frame--glow-spotlight::after{
  background:radial-gradient(90% 70% at 68% 40%, rgba(233,201,160,.12), rgba(10,11,13,0) 55%);
}
.sp-frame--glow-hot::after{
  background:
    radial-gradient(70% 70% at 50% 6%,  rgba(224,49,49,.12),  rgba(17,24,38,0) 55%),
    radial-gradient(90% 80% at 78% 45%, rgba(233,201,160,.05), rgba(17,24,38,0) 55%);
}

/* ---- inner — 1440 cap, centered, sits above the glow layer --------------- */
.sp-frame__inner{
  position:relative;
  z-index:1;
  max-width:var(--sp-maxw);
  margin-inline:auto;
  padding:var(--sp-pad-y) var(--sp-pad-x);
}
/* an angled edge eats into the box — pad that side by the angle so the inner
   content always clears the clipped corners. */
.sp-frame--top-lr    > .sp-frame__inner,
.sp-frame--top-ll    > .sp-frame__inner{padding-top:calc(var(--sp-pad-y) + var(--sp-ang))}
.sp-frame--bottom-lr > .sp-frame__inner,
.sp-frame--bottom-ll > .sp-frame__inner{padding-bottom:calc(var(--sp-pad-y) + var(--sp-ang))}

/* ---- mobile — gentler pitch (spec: ~44px) -------------------------------- */
@media (max-width:640px){
  :root{--sp-ang:44px}
}

/* ---- motion safety ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sp-frame,.sp-frame *{scroll-behavior:auto}
}