/* Reiiel — industry brief pages: animated hero, stats, and section motion. */

/* ---------- Hero ---------- */
.b-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:calc(112px + env(safe-area-inset-top,0px));padding-bottom:56px}
.b-hero .cta-row{margin-top:22px!important}
.b-hero .wrap{width:100%}
.b-hero::before{display:none}
.b-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.b-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:drift 16s ease-in-out infinite alternate}
.b-orb.o1{width:520px;height:520px;right:4%;top:6%;background:rgba(242,161,59,.2)}
.b-orb.o2{width:620px;height:620px;right:-10%;bottom:-20%;background:rgba(62,95,153,.4);animation-delay:-8s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-50px,30px) scale(1.12)}}
.b-grid{position:absolute;inset:-60px;background-image:radial-gradient(rgba(159,184,224,.22) 1px,transparent 1.3px);background-size:30px 30px;
  -webkit-mask:radial-gradient(ellipse at 75% 45%,#000 10%,transparent 65%);mask:radial-gradient(ellipse at 75% 45%,#000 10%,transparent 65%);
  animation:gridmove 22s linear infinite}
@keyframes gridmove{to{transform:translate(30px,30px)}}
.b-scan{position:absolute;left:0;right:0;height:140px;top:-140px;background:linear-gradient(180deg,transparent,rgba(242,161,59,.07),transparent);animation:scan 7s ease-in-out infinite}
@keyframes scan{0%{top:-140px}100%{top:100%}}
.b-hero .ind-code{transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .2s linear;z-index:0}
.b-hero h1{max-width:920px;font-size:clamp(2.3rem,4.3vw,3.9rem);line-height:1.02;margin-bottom:18px}
.b-hero .lede{max-width:640px}

/* Stats */
.b-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;max-width:1040px}
.b-stat{position:relative;padding:18px 20px 16px;border-radius:18px;background:rgba(12,20,38,.62);border:1px solid rgba(226,236,248,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;transition:border-color .3s,transform .3s var(--ease)}
.b-stat::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent),transparent);transition:width 1.4s var(--ease) .3s}
.b-stat.in::after{width:100%}
.b-stat:hover{border-color:rgba(255,208,138,.4);transform:translateY(-3px)}
.b-stat b{display:block;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:780;font-variation-settings:"wdth" 125;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.b-stat span{display:block;color:#AEBBD0;font-size:.92rem;margin:10px 0 12px;line-height:1.45}
.b-src{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:#6A7A90;text-decoration:none;text-transform:uppercase}
.b-src:hover{color:var(--accent-hi);text-decoration:underline}
.b-stat.own{background:linear-gradient(160deg,rgba(242,161,59,.18),rgba(12,20,38,.7));border-color:rgba(255,208,138,.35)}
.b-stat.own b{color:var(--accent)}
.b-stat.own b::after{content:" days";font-size:.42em;font-weight:600;letter-spacing:0;color:var(--accent-hi)}

/* ---------- Snapshot cards: top rule draws in ---------- */
.snap{border-top:0;position:relative;overflow:hidden}
.snap::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:#0F172A;transition:width 1s var(--ease) .2s}
.snap.in::before{width:100%}
.snap::after{content:"";position:absolute;right:-40px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(rgba(242,161,59,.18),transparent 70%);transition:transform .5s var(--ease)}
.snap:hover::after{transform:scale(1.6)}

/* ---------- Sprint cards: today fades, after arrives ---------- */
.sprint-card{overflow:hidden}
.sprint-card .before{transition:opacity .6s,color .6s}
.sprint-card.in .before{opacity:.55;text-decoration:line-through;text-decoration-color:rgba(185,28,28,.45);transition-delay:.9s}
.sprint-card .flip{display:block;height:22px;margin:-4px 0 6px 13px;border-left:2px dashed #A1A1AA;position:relative}
.sprint-card .flip::after{content:"";position:absolute;left:-6px;bottom:-2px;border:5px solid transparent;border-top:7px solid #A1A1AA}
.sprint-card .after{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sprint-card.in .after{opacity:1;transform:none;transition-delay:1.3s}
.sprint-card.in:nth-child(2) .before{transition-delay:1.1s}.sprint-card.in:nth-child(2) .after{transition-delay:1.5s}
.sprint-card.in:nth-child(3) .before{transition-delay:1.3s}.sprint-card.in:nth-child(3) .after{transition-delay:1.7s}

/* ---------- Trends: numbered, slide in ---------- */
.trends{counter-reset:t}
.trends li{counter-increment:t;grid-template-columns:44px 1fr;column-gap:6px;opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.trends li::before{content:counter(t,decimal-leading-zero);grid-row:span 2;font-family:var(--mono);font-size:.78rem;color:var(--accent-text);padding-top:3px}
.rv.in .trends li{opacity:1;transform:none}
.rv.in .trends li:nth-child(2){transition-delay:.08s}.rv.in .trends li:nth-child(3){transition-delay:.16s}
.rv.in .trends li:nth-child(4){transition-delay:.24s}.rv.in .trends li:nth-child(5){transition-delay:.32s}

/* ---------- Responsive + motion safety ---------- */
@media (max-width:860px){.b-stats{grid-template-columns:1fr 1fr}.b-stat.own{grid-column:1/-1}.b-hero{min-height:auto;padding-top:130px}}
@media (max-width:520px){.b-stats{grid-template-columns:1fr}.b-orb.o1{width:320px;height:320px}.b-orb.o2{width:380px;height:380px}}
@media (prefers-reduced-motion:reduce){
  .b-orb,.b-grid,.b-scan{animation:none}
  .sprint-card .after,.trends li{opacity:1;transform:none}
}
html:not(.js) .sprint-card .after,html:not(.js) .trends li{opacity:1;transform:none}