/* ==========================================================================
   Element 6 — FRONT PAGE SPLASH
   Loaded only on the front page (see inc/front-splash.php).

   Colour tokens come from style.css. The layout tokens below are namespaced
   --e6s-* so they cannot collide with the theme's own. The breath keyframes
   and @property live in main.css; this file only uses them.
   ========================================================================== */

.e6-front-splash{
  --e6s-gutter:clamp(20px,5vw,72px);
  --e6s-max:1180px;
  --e6s-rail:104px;
  --e6s-hair:rgba(163,174,208,.16);
  --e6s-hair-soft:rgba(163,174,208,.09);
  --e6s-sans:var(--e6-font-body,"Inter",system-ui,sans-serif);
  --e6s-mono:var(--e6-font-mono,ui-monospace,"SF Mono",Menlo,monospace);
  position:relative;
}

/* the acts need their own heading reset; the theme's is scoped elsewhere */
.e6-front-splash h1,
.e6-front-splash h2,
.e6-front-splash h3{
  margin:0;font-weight:500;text-wrap:balance;
  letter-spacing:-.02em;line-height:1.08;
}

:root{
  --e6-charcoal:#1E2022;
  --e6-screen:#0B0D0F;
  --e6-signal:#F26419;
  --e6-white:#F4F4F6;
  --e6-silver:#A3AED0;
  --e6-slate:#8E95A5;
  --e6-bezel:#6E7787;

  --e6s-hair:rgba(163,174,208,.16);
  --e6s-hair-soft:rgba(163,174,208,.09);

  --e6s-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --e6s-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --e6s-gutter:clamp(20px,5vw,72px);
  --e6s-max:1180px;
  --e6s-rail:104px;
}

a{color:inherit;text-decoration:none}

#e6-splash-lattice{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}

.e6-ground{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(125% 85% at 50% 0%, rgba(11,13,15,0) 0%, rgba(11,13,15,.34) 60%, rgba(11,13,15,.62) 100%);
}

.e6-act{
  position:relative;z-index:10;
  padding:clamp(96px,13vh,168px) var(--e6s-gutter);
  max-width:calc(var(--e6s-max) + var(--e6s-gutter)*2);
  margin:0 auto;
}

@property --e6s-seam{ syntax:'<number>'; inherits:true; initial-value:0; }

/* the bond seam: each act's top edge lights from the middle as it arrives */
.e6-act::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--e6s-hair) 22%,
    rgba(242,100,25,calc(.85 * var(--e6s-seam))) 50%,
    var(--e6s-hair) 78%,
    transparent 100%);
  transform:scaleX(.18);
  transform-origin:50% 50%;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.e6-act.is-in::before{ transform:scaleX(1) }
.e6-act:first-of-type::before{ display:none }
.e6-act.is-in{ --e6s-seam:1; transition:--e6s-seam 1.4s ease .15s }

/* acts arrive with a small lift, and are fully legible at rest */
.e6-act > *{ transition:transform .9s cubic-bezier(.16,1,.3,1) }
.e6-act:not(.is-in) > *{ transform:translateY(12px) }

.e6-label{
  font-family:var(--e6s-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--e6-bezel);
  display:flex;align-items:center;gap:12px;margin:0 0 clamp(28px,4vh,46px);
}

.e6-label::before{
  content:"";width:52px;height:1px;background:var(--e6s-hair);flex:none;
}

.e6-splash{
  min-height:min(84vh,820px);
  display:flex;flex-direction:column;justify-content:center;
  /* body.home already clears the fixed header; this is breathing room, not clearance */
  padding-top:clamp(48px,7vh,96px);
  padding-bottom:clamp(56px,8vh,96px);
  padding-left:var(--e6s-gutter);
  padding-right:var(--e6s-gutter);
  max-width:calc(var(--e6s-max) + var(--e6s-gutter)*2);
  margin:0 auto;
  position:relative;z-index:10;
}

.e6-splash-logo-wrap{
  position:relative;
  align-self:flex-start;
  line-height:0;
}

.e6-splash-logo-wrap::before{
  content:"";
  position:absolute;
  left:5.302%; top:11.94%; width:19.75%; height:44.48%;
  border-radius:13.5%;
  animation:e6-breath 4s linear infinite;
  box-shadow:0 0 calc(38px * var(--e6-g)) calc(5px * var(--e6-g)) rgba(242,100,25,calc(.5 * var(--e6-g)));
  pointer-events:none;
}

.e6-splash-logo{
  position:relative;
  display:block;
  width:min(660px,74vw);
  height:auto;
}

.e6-vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.e6-splash-sub{
  margin:clamp(28px,4vh,42px) 0 0;
  max-width:46ch;
  font-size:clamp(1rem,1.25vw,1.12rem);
  color:var(--e6-silver);
  line-height:1.65;
}

.e6-carbon-cell{
  width:148px;
  border:1px solid var(--e6s-hair);
  padding:12px 14px 14px;
  font-family:var(--e6s-mono);
  color:var(--e6-slate);
  background:rgba(11,13,15,.42);
}

.e6-carbon-cell-n{font-size:.72rem;letter-spacing:.14em;color:var(--e6-bezel)}

.e6-carbon-cell-sym{
  font-family:var(--e6s-sans);font-weight:500;font-size:2.9rem;line-height:1;
  color:var(--e6-white);margin:2px 0 6px;letter-spacing:-.02em;
}

.e6-carbon-cell-name{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--e6-silver)}

.e6-carbon-cell-mass{font-size:.68rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-top:4px}

.e6-carbon-cell-cfg{font-size:.62rem;letter-spacing:.05em;margin-top:8px;padding-top:8px;border-top:1px solid var(--e6s-hair-soft)}



.e6-cue{
  margin-top:clamp(26px,4vh,46px);
  display:flex;align-items:center;gap:14px;
  font-family:var(--e6s-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--e6-bezel);
}

.e6-cue-line{
  width:64px;height:1px;background:linear-gradient(90deg,var(--e6-bezel),transparent);
  transform-origin:left;animation:e6-cue 2.6s ease-in-out infinite;
}

@keyframes e6-cue{0%,100%{transform:scaleX(.4);opacity:.45}50%{transform:scaleX(1);opacity:1}}

.e6-thesis{
  font-size:clamp(1.85rem,4.6vw,4rem);
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.025em;
  max-width:19ch;
  margin:0;
  color:var(--e6-white);
}

.e6-front-splash .wd{display:inline-block;white-space:nowrap}
.e6-front-splash .ch{
  display:inline-block;
  will-change:transform;
  transition:color .28s ease;
}

.e6-after{
  margin:clamp(34px,5vh,58px) 0 0;
  max-width:60ch;
  font-size:clamp(1rem,1.3vw,1.14rem);
  color:var(--e6-silver);
  line-height:1.72;
}

.e6-after strong{color:var(--e6-white);font-weight:500}

.e6-hint{
  margin-top:20px;font-family:var(--e6s-mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--e6-bezel);
}

.e6-make-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,6vh,64px);
}

.e6-make-head h2{font-size:clamp(1.9rem,4vw,3.1rem);max-width:16ch}

.e6-make-head p{margin:0;max-width:38ch;color:var(--e6-silver);font-size:1rem}

.e6-rows{border-top:1px solid var(--e6s-hair)}

.e6-row{
  display:grid;
  grid-template-columns:var(--e6s-rail) minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(16px,3vw,40px);
  align-items:start;
  padding:clamp(24px,3.4vh,36px) 0;
  border-bottom:1px solid var(--e6s-hair);
  position:relative;
  transition:background .3s ease;
}

.e6-row::before{
  content:"";position:absolute;left:calc(var(--e6s-gutter) * -1);right:calc(var(--e6s-gutter) * -1);
  top:0;bottom:0;background:rgba(163,174,208,.035);opacity:0;transition:opacity .3s ease;
  pointer-events:none;
}

.e6-row:hover::before{opacity:1}

.e6-row-id{
  font-family:var(--e6s-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--e6-bezel);padding-top:.45em;
  transition:color .3s ease;
}

.e6-row:hover .e6-row-id{color:var(--e6-signal)}

.e6-row h3{font-size:clamp(1.15rem,2vw,1.5rem);color:var(--e6-white)}

.e6-row-note{margin:0;color:var(--e6-silver);font-size:.98rem;line-height:1.68}

.e6-row-note em{
  font-style:normal;color:var(--e6-bezel);font-family:var(--e6s-mono);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:10px;
}

/* a linked meta line: orange is allowed here -- a link is an action */
.e6-row-note em a{
  color:var(--e6-signal);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .22s ease,color .22s ease;
}
.e6-row-note em a span{display:inline-block;transition:transform .22s ease}
.e6-row-note em a:hover{border-bottom-color:currentColor}
.e6-row-note em a:hover span{transform:translateX(3px)}

@media (max-width:760px){
  .e6-row{grid-template-columns:1fr;gap:10px}
  .e6-row-id{padding-top:0}
}

.e6-tenets{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--e6s-hair);
  border:1px solid var(--e6s-hair);
}

.e6-tenet{
  background:var(--e6-charcoal);
  padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:12px;
}

.e6-tenet h3{font-size:1.06rem;letter-spacing:-.005em;line-height:1.3}

.e6-tenet p{margin:0;color:var(--e6-silver);font-size:.94rem;line-height:1.68}

.e6-tenet-mark{
  width:26px;height:26px;border-radius:13.5%;flex:none;
  border:1px solid var(--e6s-hair);
  display:grid;place-items:center;
  font-family:var(--e6s-mono);font-size:.66rem;color:var(--e6-bezel);
}

.e6-tenet.is-rule{background:var(--e6-screen)}

.e6-tenet.is-rule .e6-tenet-mark{border-color:rgba(242,100,25,.45);color:var(--e6-signal)}

.e6-tenet.is-rule h3{color:var(--e6-signal)}

.e6-door{
  border:1px solid var(--e6s-hair);
  background:var(--e6-screen);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
}

.e6-door-copy{padding:clamp(28px,3.6vw,44px);display:flex;flex-direction:column;gap:18px}

.e6-door-copy h2{font-size:clamp(1.6rem,3vw,2.4rem);max-width:17ch}

.e6-door-copy p{margin:0;color:var(--e6-silver);font-size:1rem;line-height:1.7;max-width:46ch}

.e6-door-copy .e6-actions{margin-top:8px}

.e6-door-demo{
  border-left:1px solid var(--e6s-hair);
  padding:clamp(28px,3.6vw,44px);
  display:flex;flex-direction:column;gap:18px;justify-content:center;
  font-family:var(--e6s-mono);font-size:.95rem;line-height:1.9;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(242,100,25,.05) 0%, transparent 60%),
    var(--e6-screen);
  overflow-x:auto;
}

.e6-door-demo .who{
  display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--e6-bezel);margin-bottom:7px;
}

.e6-door-demo p{margin:0;color:var(--e6-silver)}

.e6-door-demo .said{color:var(--e6-white)}
.e6-door-demo > p{max-width:44ch}

.e6-door-demo .e6-door-cap{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--e6s-hair-soft);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--e6-bezel);
}

@media (max-width:820px){
  .e6-door{grid-template-columns:1fr}
  .e6-door-demo{border-left:0;border-top:1px solid var(--e6s-hair)}
}

.e6-close{text-align:left;padding-bottom:clamp(120px,16vh,200px)}

.e6-close-mark{
  display:block;width:64px;height:64px;
  animation:e6-breath 4s linear infinite;
  filter:drop-shadow(0 0 calc(22px * var(--e6-g)) rgba(242,100,25,calc(.55 * var(--e6-g))));
  margin-bottom:28px;
}

.e6-close h2{
  font-size:clamp(1.7rem,4.2vw,3rem);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--e6-slate);
  max-width:none;
}

.e6-close p{margin:22px 0 0;max-width:52ch;color:var(--e6-silver);font-size:1.05rem}

.e6-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(32px,5vh,48px)}

.e6-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--e6s-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  padding:14px 22px;border:1px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}

.e6-btn-primary{background:var(--e6-signal);color:var(--e6-charcoal)}

.e6-btn-primary:hover{background:#FF7629;transform:translateY(-2px)}

.e6-btn-secondary{border-color:var(--e6s-hair);color:var(--e6-silver)}

.e6-btn-secondary:hover{border-color:var(--e6-silver);color:var(--e6-white);transform:translateY(-2px)}

.e6-btn span{transition:transform .22s ease}

.e6-btn:hover span{transform:translateX(4px)}

.e6-spec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--e6s-hair-soft);
  border-top:1px solid var(--e6s-hair);border-bottom:1px solid var(--e6s-hair);
  margin-top:clamp(56px,8vh,88px);
}

.e6-spec div{background:var(--e6-charcoal);padding:18px 20px;font-family:var(--e6s-mono)}

.e6-spec dt{
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--e6-bezel);margin:0 0 6px;
}

.e6-spec dd{
  margin:0;font-size:.86rem;color:var(--e6-silver);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}

@media (max-width:980px){
  .e6-tenets{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .e6-act:not(.is-in) > *{transform:none}
  .e6-act + .e6-act::before{transform:scaleX(1)}
}


/* the hero pins its card to the right; the close places one in a grid */
.e6-splash .e6-carbon-cell{
  position:absolute;
  right:var(--e6s-gutter);
  top:50%;
  transform:translateY(-50%);
}
@media (max-width:900px){ .e6-splash .e6-carbon-cell{display:none} }

/* the close mirrors the hero: card left, words right */
.e6-close-grid{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(28px,6vw,88px);
  align-items:center;
}
.e6-close-copy{
  justify-self:end;
  max-width:600px;   /* wide enough that the heading holds one line */
}
.e6-carbon-cell-static{position:relative;justify-self:start}
@media (max-width:820px){
  .e6-close-grid{grid-template-columns:1fr;gap:clamp(24px,5vh,40px)}
  .e6-carbon-cell-static{display:block}
}