/* FODL WAY — the answer to the problems grid, directly below the SHIFT lockup.
   The section carries the SHIFT hand-off: its top gradient is the mirror of the
   final .fsh-glow state, so the two sections read as one yellow glow centered on
   the seam. Left: a fan of three story cards cycling front / right-back / left-back,
   ported from hashtag-template.webflow.io home/3 (spec lifted from its IX2 data,
   action list a-471 — rest states + 2s hold / 1s swingTo swap live in the inline
   script). Right: the three pillars, echoing the problems list's row anatomy
   (fodl-problems.css), each row lighting up while its card holds the front slot.
   The card chrome reuses the .fpr-* story classes so both cards stay identical. */

.fway-section{background-color:#0A0A0A;position:relative;overflow:hidden}
.fway-seam{position:absolute;top:0;left:0;right:0;height:46vh;pointer-events:none;
  background:linear-gradient(to bottom,#eeb60347 0%,#eeb60300 78%)}
.fway-section .padding-section-v{padding-top:7em;padding-bottom:7em}
.fway-layout{grid-column-gap:5em;grid-row-gap:4em;grid-template-columns:1fr 1.15fr;align-items:center;display:grid;position:relative}

/* --- card fan ---
   The stack keeps the story card's 2/3.4 aspect. perspective + preserve-3d matter:
   the cards' translateZ is what sizes the back cards down AND what makes the front
   card paint on top — there is no z-index juggling, depth sorting does it (same as
   the original: perspective 1000px on the wrap). The fan spills ~35% of the card
   width past both sides of the stack; the 1.1fr column leaves room for it. */
.fway-stage{justify-self:center;width:100%;max-width:20rem;position:relative}
.fway-halo{position:absolute;inset:-24% -50%;pointer-events:none;
  background:radial-gradient(48% 44% at 50% 50%,#eeb6031f 0%,#eeb60300 70%)}
.fway-stack{aspect-ratio:2/3.4;perspective:1000px;transform-style:preserve-3d;width:100%;position:relative}
.fway-card{border-radius:1.5rem;flex-flow:column;justify-content:flex-start;align-items:center;display:flex;position:absolute;inset:0;overflow:clip;box-shadow:0 1.2rem 3.5rem #00000073}
/* no-JS / pre-boot fallback: the resting fan (translate before rotate — the IX2
   matrices keep the translation on unrotated axes). GSAP overwrites these. */
.fway-card.is-1{transform:translate3d(-35%,2%,-100px) rotate(-5deg)}
.fway-card.is-3{transform:translate3d(32%,10%,-102px) rotate(7deg)}
.fway-card-media{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}
/* dim veil over back-slot cards; GSAP drives opacity 0 (front) / .35 (back) */
.fway-dim{background-color:#0a0a0a;opacity:0;position:absolute;inset:0;z-index:5;pointer-events:none}
.fway-card.is-1 .fway-dim,.fway-card.is-3 .fway-dim{opacity:.35}

/* --- right column: tag, transformation table, showreel pill ---
   The table rows are fragment's about-2 team rows (.team-2-item) on our theme:
   hairline rows that on hover snap a yellow fill (their tinted bg has no
   transition — the snap is the feel), grow via min-height and indent via
   padding-left on their cubic-bezier(.075,.82,.165,1) .6s, content flipping to
   near-black (.2s, like their name color roll). Each row is problem -> solution
   with the arrow inline on currentColor. The showreel pill is their hero-3
   button (ui-kit/hero-designs): a 2px-padded flex <a> whose thumbnail and label
   see-saw widths on hover (each grows to 120% on its own hover, same curve),
   label idling at half opacity with a tint + border on hover. Like theirs, the
   pill has no visible border at rest (transparent, 2px pad) — the yellow
   outline is the hover state; <=991px (no hover) it stays outlined + tinted,
   as in their tablet rule. */
.fway-side{grid-row-gap:1.7em;flex-flow:column;display:flex}
.fway-tag{margin-bottom:.2em}
.fway-tag .labels-block{justify-content:flex-end;grid-column-gap:.55em;grid-row-gap:.55em;font-size:.85rem;padding-bottom:0}
.fway-tag .label-text{color:#eeb603}

.fway-table{flex-flow:column;display:flex}
.fway-row{grid-column-gap:1.5em;border-bottom:1px solid #dcdcdc2e;grid-template-columns:minmax(9.5em,.72fr) auto 1fr;align-items:center;min-height:4.7em;padding:.55em 0;display:grid;position:relative;
  transition:min-height .6s cubic-bezier(.075,.82,.165,1),padding-left .6s cubic-bezier(.075,.82,.165,1),margin .6s cubic-bezier(.075,.82,.165,1),border-color .2s}
/* the .9em swell is split into negative margins so the row grows in place
   (half up, half down) instead of pushing the pill — the side column is the
   band's height driver on desktop, so a push here would stretch the card fan */
.fway-row:hover{background-color:#EEB603;border-bottom-color:#EEB603;min-height:5.6em;margin:-.45em 0;padding-left:1.5em;z-index:1}
.fway-row-problem{color:#dcdcdcb3;font-family:Geist,sans-serif;font-size:.92rem;font-weight:500;letter-spacing:-.02em;line-height:1.35;transition:color .2s}
.fway-row-arrow{color:#EEB603;flex:none;width:1.45em;height:1.45em;display:block;transition:color .2s}
.fway-row-solution{color:#f0f0f0;font-family:Geist,sans-serif;font-size:1.02rem;font-weight:700;letter-spacing:.01em;text-transform:uppercase;line-height:1.3;transition:color .2s}
.fway-row:hover .fway-row-problem,.fway-row:hover .fway-row-arrow,.fway-row:hover .fway-row-solution{color:#0a0a0a}

.fway-reel{border:1px solid transparent;border-radius:.5rem;justify-content:flex-start;align-self:flex-end;align-items:center;width:100%;max-width:26rem;margin-top:.3em;padding:2px;text-decoration:none;display:flex;transition:border-color .2s}
.fway-reel:hover{border-color:#EEB603}
.fway-reel-thumb{border-radius:.4rem;width:100%;height:4.4rem;position:relative;overflow:hidden;transition:width .6s cubic-bezier(.075,.82,.165,1)}
.fway-reel-thumb:hover{width:120%}
.fway-reel-thumb img{object-fit:cover;opacity:.85;width:100%;height:100%;display:block}
.fway-reel-label{grid-column-gap:.8em;opacity:.5;color:#EEB603;justify-content:center;align-self:stretch;align-items:center;width:100%;padding:1.2em;font-family:Geist,sans-serif;font-size:.85rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;display:flex;
  transition:opacity .2s,background-color .2s,width .6s cubic-bezier(.075,.82,.165,1)}
.fway-reel-label:hover{background-color:#eeb6031a;opacity:1;width:120%}
.fway-reel-down{width:1.1em;height:1.1em;flex:none}

/* --- equal columns (comp) ---
   Desktop only, the same band as the problems section: tag top / card top and
   pill bottom / card bottom sit on one line. The right column is the sole
   height driver (its rows scale with the vw-based section font, the card was
   rem-based, so at 1920 the two drifted 70px apart); the card keeps its 2/3.4
   story aspect and takes its WIDTH from that height — sizing it like a 9:16
   frame slotted into the row rather than stretching it skinny. Mechanics: the
   stage stretches to the grid row (definite height), the stack is a flex item
   with height:100% + aspect-ratio, so its flex-basis is the transferred width
   (flexbox 9.2.B); the halo re-derives its box from the same height so the
   glow stays tied to the card, not the column. Below 992px the stage returns
   to its max-width + aspect (columns stack there). */
@media screen and (min-width:992px){
.fway-stage{align-self:stretch;justify-self:stretch;width:100%;max-width:none;justify-content:center;display:flex}
.fway-stack{aspect-ratio:2/3.4;flex:0 0 auto;width:auto;height:100%}
.fway-halo{inset:-24% auto;left:50%;aspect-ratio:1.1765/1.48;transform:translateX(-50%)}
}

@media (prefers-reduced-motion: reduce){
.fway-row,.fway-row-problem,.fway-row-arrow,.fway-row-solution,.fway-reel,.fway-reel-thumb,.fway-reel-label{transition:none}
}

@media screen and (max-width:991px){
.fway-layout{grid-column-gap:3em;grid-row-gap:3em;grid-template-columns:1fr}
.fway-stage{max-width:16rem;margin:0 auto}
.fway-row{grid-column-gap:1em;grid-template-columns:minmax(8em,.8fr) auto 1fr}
/* touch: no hover morph (fragment's tablet rule), no sticky yellow row after a tap */
.fway-row:hover{background-color:transparent;border-bottom-color:#dcdcdc2e;min-height:4.7em;margin:0;padding-left:0}
.fway-row:hover .fway-row-problem{color:#dcdcdcb3}
.fway-row:hover .fway-row-arrow{color:#EEB603}
.fway-row:hover .fway-row-solution{color:#f0f0f0}
.fway-reel{border-color:#EEB603}
.fway-reel-label{background-color:#eeb6031a;opacity:1}
}
@media screen and (max-width:767px){
.fway-stage{max-width:17rem}
.fway-row{grid-template-columns:1fr;grid-row-gap:.35em;justify-items:start;padding:1em 0}
.fway-row-arrow{display:none}
.fway-reel{max-width:100%}
.fway-seam{height:32vh}
}