/* The Lion's Den events | shared motion layer (v1, 2026-10-13)
   Light touch: hero load-in, claw slashes, scroll reveals, hover feedback.
   Everything moving sits inside prefers-reduced-motion: no-preference. */

/* ---------- static polish (all users) ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:1}
.hero::after{ /* three torn claw slashes, modeled on the approved logo (assets/claws.svg) */
  content:"";position:absolute;z-index:0;right:max(3vw,24px);top:50%;height:min(84%,430px);aspect-ratio:1;transform:translateY(-50%);
  background:url(/assets/claws.svg?v=fba899ae) center/contain no-repeat;opacity:var(--claw-o,.92);pointer-events:none}
.hero-fx{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.claw i{font-style:normal;display:inline-block}
.btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arr{display:inline-block;margin-left:8px;transition:transform .2s ease}
.btn:hover .arr,.ev:hover .btn .arr{transform:translateX(4px)}
.bar{transition:box-shadow .25s ease}
.bar.scrolled{box-shadow:0 8px 24px rgba(2,8,23,.35)}
/* event cards (list page) */
.ev{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ev:not(.past):hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(7,27,56,.12)}
.tag.live{display:inline-flex;align-items:center;gap:8px}
.tag.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--midnight)}
/* form polish */
input,select,textarea{transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(11,99,246,.14)}
.radios label{transition:border-color .15s ease,background-color .15s ease}
.radios label:hover{border-color:var(--cobalt)}
.radios label:has(input:checked){border-color:var(--cobalt);background:#EEF4FF}
/* faq */
.faq summary{transition:color .15s ease}
.faq summary:hover{color:var(--cobalt)}
.faq summary::after{transition:transform .25s ease}
.faq details[open] summary::after{content:"+";transform:translateY(-50%) rotate(45deg)}
.foot-links a,.bar a.skool{transition:color .15s ease}

@media (max-width:900px){ .hero::after{--claw-o:.5;height:min(60%,300px);right:-6vw} }
@media (max-width:640px){ .hero::after{--claw-o:.22;height:170px;right:-46px;top:-6px;transform:none} }

/* ---------- motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes slash{from{opacity:0;transform:translateY(-6px) scaleY(.2)}to{opacity:1;transform:none}}
  @keyframes ink{to{background-size:100% .09em}}
  @keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-6%,4%,0)}}
  @keyframes rip{0%{clip-path:polygon(0 0,0 0,0 0)}100%{clip-path:polygon(0 0,210% 0,0 210%)}}
  @keyframes smolder{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,90,31,0))}50%{filter:brightness(1.12) drop-shadow(0 0 14px rgba(255,90,31,.35))}}
  @keyframes drift2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.08)}100%{transform:translate3d(-3%,2%,0) scale(1)}}
  @keyframes shine{to{transform:translateX(130%)}}
  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(2,8,23,.45)}80%,100%{box-shadow:0 0 0 7px rgba(2,8,23,0)}}
  @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes fadeDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

  /* hero load-in, staggered */
  .hero .wrap>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
  .hero .wrap>:nth-child(1){animation-delay:.05s}
  .hero .wrap>:nth-child(2){animation-delay:.15s}
  .hero .wrap>:nth-child(3){animation-delay:.3s}
  .hero .wrap>:nth-child(4){animation-delay:.42s}
  .hero .wrap>:nth-child(5){animation-delay:.54s}
  .hero .wrap>:nth-child(6){animation-delay:.64s}
  .claw i{animation:slash .35s cubic-bezier(.2,.7,.2,1) backwards}
  .claw i:nth-child(1){animation-delay:.25s}
  .claw i:nth-child(2){animation-delay:.33s}
  .claw i:nth-child(3){animation-delay:.41s}
  /* ember underline swipes under the cyan headline words */
  .hero h1 span{background:linear-gradient(var(--ember),var(--ember)) 0 96%/0% .09em no-repeat;animation:ink .9s .85s cubic-bezier(.6,0,.2,1) forwards;padding-bottom:.04em}
  /* slow background glow and claw drift */
  .hero::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
    background:radial-gradient(520px 320px at 70% 30%,rgba(8,200,248,.14),transparent 65%),radial-gradient(460px 300px at 22% 92%,rgba(255,90,31,.10),transparent 70%),radial-gradient(600px 380px at 45% 55%,rgba(11,99,246,.12),transparent 70%);
    animation:drift2 18s ease-in-out infinite}
  .hero::after{animation:rip .45s .5s cubic-bezier(.7,0,.3,1) backwards,smolder 5s 1.4s ease-in-out infinite}
  /* one shine pass on the hero button after load, then on hover */
  .hero .btn::after{animation:shine .9s 1.5s ease-out}
  .btn:hover::after{animation:shine .7s ease-out}
  .tag.live::before{animation:ping 1.8s ease-out infinite}

  /* scroll reveal: html.m is set inline in <head>; motion.js adds .in */
  .m :is(main section:not(.hero) .kicker,main section:not(.hero) h2,main section:not(.hero) .intro,.card,.day,.ev,.faq details,.next li,#formbox){
    opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .22s ease,box-shadow .22s ease,border-color .22s ease}
  .m .sched li{opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s ease;transition-delay:var(--d,0s)}
  .m .in{opacity:1!important;transform:none!important}
  .m .ev.in:not(.past):hover{transform:translateY(-3px)!important;transition-delay:0s}

  .faq details[open] p{animation:fadeDown .25s ease both}
  .sent .thanks{animation:pop .45s cubic-bezier(.2,.7,.2,1) backwards}
}

/* ---------- hover (mouse and trackpad only; touch screens skip it) ---------- */
@media (hover:hover){
  /* schedule rows: soft highlight band + accent bar on the left */
  .sched li{position:relative}
  .sched li::before{content:"";position:absolute;inset:1px -14px 0;border-radius:6px;pointer-events:none;
    background:linear-gradient(90deg,rgba(8,200,248,.16),rgba(8,200,248,.03) 75%);opacity:0;transition:opacity .2s ease}
  .sched li::after{content:"";position:absolute;left:-14px;top:9px;bottom:8px;width:3px;border-radius:2px;background:var(--cyan);
    transform:scaleY(0);transition:transform .22s ease;pointer-events:none}
  .day.vip .sched li::before{background:linear-gradient(90deg,rgba(255,90,31,.18),rgba(255,90,31,.03) 75%)}
  .day.vip .sched li::after{background:var(--ember)}
  .sched li>*{position:relative;z-index:1;transition:transform .22s ease,color .2s ease}
  .sched li:hover::before{opacity:1}
  .sched li:hover::after{transform:scaleY(1)}
  .sched li:hover span{color:#fff}
  .day.vip .sched li:hover b{color:#FF9A70}
  /* day cards, content cards, FAQ rows */
  .day{transition:border-color .25s ease,box-shadow .25s ease}
  .day:hover{border-color:rgba(8,200,248,.45);box-shadow:0 18px 40px rgba(0,0,0,.28)}
  .day.vip:hover{border-color:rgba(255,90,31,.5)}
  .card{transition:border-color .22s ease,box-shadow .22s ease}
  .card:hover{border-color:#B9C9DE;box-shadow:0 14px 30px rgba(7,27,56,.10)}
  .faq details{transition:border-color .2s ease}
  .faq details:hover{border-color:#B9C9DE}
  .ev.past{transition:border-color .2s ease}
  .ev.past:hover{border-color:#C3CFDE}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sched li:hover>*{transform:translateX(6px)}
  .card:hover,.day:hover{translate:0 -3px}
}