/* THEME PAGES / mobile-led art direction, accurate photo crops and subtle fades. */
.site-page[hidden]{display:none!important}
#contenu{opacity:1;transition:opacity .22s ease;min-height:70svh}
#contenu.is-fading{opacity:0;pointer-events:none}
.site-page h1:focus,.site-page h2:focus{outline:none}
.main-links a[aria-current=page]{color:#34f0ed}
.main-links a[aria-current=page]::after{content:'';width:5px;height:5px;background:#ff4d91;border-radius:50%;box-shadow:0 0 10px #ff4d91}

/* Information, not decoration: the banner explains the features, with links. */
.feature-ticker{position:fixed;top:82px;left:0;right:0;height:34px;z-index:88;overflow:hidden;background:linear-gradient(92deg,#11d9de,#95edcb 43%,#ff719c 75%,#ff985d);border-bottom:1px solid rgba(255,255,255,.34);color:#081726}
.ticker-motion{height:100%;display:flex;width:max-content;animation:feature-marquee 43s linear infinite}
.ticker-set{height:100%;display:flex;flex:none;align-items:center}
.ticker-set>a,.ticker-set>span{display:flex;align-items:center;gap:22px;padding:0 26px;white-space:nowrap;font-size:10px;letter-spacing:.15em;font-weight:800;height:100%;transition:background .2s}
.ticker-set>a:hover{background:rgba(255,255,255,.27)}
.ticker-set b{font-size:12px;color:#e91e70}
@keyframes feature-marquee{to{transform:translate3d(-50%,0,0)}}

/* The opening is a gateway to themed pages, not an endless one-page scroll. */
.hero{min-height:max(900px,100svh);background-position:74% 46%}
.hero-content{padding-top:195px}
.hero-jersey{background-position:center 47%}
.hero-fish-art{right:-10vw;bottom:-11vh;width:min(65vw,1030px)}
.hero-gear{bottom:109px}
.site-hub{padding:88px max(5.2vw,calc((100vw - 1650px)/2)) 112px;background:radial-gradient(ellipse at 82% 4%,rgba(172,81,232,.2),transparent 42%),linear-gradient(140deg,#11172e,#0a2530 75%);border-top:1px solid rgba(32,235,238,.4)}
.hub-overline{display:flex;justify-content:space-between;gap:25px;font:800 11px var(--body);letter-spacing:.2em;color:#23eff1;padding-bottom:27px;border-bottom:1px solid rgba(32,240,243,.35);margin:0 0 27px}
.hub-overline span{color:#9daebd;font-size:9px}
.hub-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hub-link{min-height:335px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:15px;padding:33px 27px 27px;background:linear-gradient(145deg,rgba(31,61,72,.89),rgba(14,22,42,.97));border:1px solid rgba(23,231,240,.36);transition:transform .3s,border-color .3s,background .3s;isolation:isolate}
.hub-link:nth-child(2){background:linear-gradient(146deg,rgba(68,35,85,.85),rgba(17,20,43,.97));border-color:rgba(255,90,157,.42)}
.hub-link:nth-child(3){background:linear-gradient(145deg,rgba(29,73,77,.78),rgba(16,20,41,.95));border-color:rgba(217,255,61,.38)}
.hub-link::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/jersey-flow-v11.svg') center/175% auto no-repeat;opacity:.27;mix-blend-mode:screen}
.hub-link:hover{transform:translateY(-7px);border-color:#55f4f0}
.hub-index{font:800 10px var(--body);letter-spacing:.12em;color:#28f1f4}
.hub-link:nth-child(2) .hub-index{color:#ff7ba9}.hub-link:nth-child(3) .hub-index{color:#e0fb6b}
.hub-link strong{font:800 clamp(49px,5vw,88px)/.86 var(--display);color:#f6f7ed;letter-spacing:-.01em;margin:auto 0 20px}
.hub-caption{max-width:250px;color:#d9e5e5;font-size:14px;line-height:1.5;padding-right:20px}
.hub-arrow{position:absolute;right:25px;bottom:21px;color:#25f1f0;font-size:31px}
.hub-link:nth-child(2) .hub-arrow{color:#ff6ea9}.hub-link:nth-child(3) .hub-arrow{color:#e3fb65}

/* Each theme opens below the fixed navigation and information ribbon. */
.method{min-height:100svh;padding-top:168px}
.method-lead{padding-top:64px}
.experience-slide{padding-top:155px}
.league{padding-top:161px;min-height:100svh}
.closing{min-height:100svh}
.closing-inner{padding-top:164px}
.footer{border-top:1px solid rgba(255,105,167,.27)}

@media(max-width:880px){
  .feature-ticker{top:66px;height:30px}
  .ticker-set>a,.ticker-set>span{padding:0 20px;font-size:9px;letter-spacing:.07em;gap:15px}
  .hero{min-height:max(810px,100svh);background-position:87% 43%}
  .hero-content{padding-top:181px;padding-bottom:295px}
  .hero-film{background:linear-gradient(90deg,rgba(6,11,28,.81),rgba(7,13,34,.51)),linear-gradient(0deg,rgba(5,9,28,.89) 0%,rgba(6,13,28,.32) 54%,rgba(9,12,31,.6))}
  .hero-colorwash{opacity:.87}
  .hero-jersey{background-size:950px auto;background-position:58% 43%;opacity:.84}
  .hero-ink{opacity:.17}
  .hero-fish-art{width:98vw;height:39vh;right:-9vw;bottom:9vh;opacity:.55;background-position:center center;filter:saturate(1.8) contrast(1.15)}
  .hero-gear{bottom:93px;right:auto;max-width:calc(100% - 44px)}
  .site-hub{padding:55px 21px 70px}
  .hub-overline{font-size:10px;letter-spacing:.12em;margin-bottom:19px;padding-bottom:17px}
  .hub-overline span{display:none}
  .hub-links{grid-template-columns:1fr;gap:12px}
  .hub-link{min-height:175px;padding:22px 22px 18px;gap:8px}
  .hub-link::before{background-size:105% auto;background-position:85% center;opacity:.24}
  .hub-link strong{font-size:clamp(49px,13vw,66px);margin:14px 0 4px}
  .hub-index{font-size:9px}
  .hub-caption{font-size:12px}
  .hub-arrow{font-size:24px;right:20px;bottom:21px}
  .method{padding-top:132px}
  .method-lead{padding-top:41px}
  .experience-slide{padding-top:151px}
  .league{padding-top:143px}
  .closing-inner{padding-top:155px}
  .main-links a[aria-current=page]::after{margin-left:auto}
}
@media(max-width:390px){
  .hero{background-position:87% 43%}
  .hero-content{padding-top:174px;padding-bottom:280px}
  .hero-fish-art{width:100vw;right:-11vw;bottom:9vh;opacity:.53}
  .hub-link strong{font-size:47px}
  .method{padding-top:125px}
  .league{padding-top:134px}
}
@media(prefers-reduced-motion:reduce){
  #contenu{transition:none}
  .ticker-motion{animation:none}
  .feature-ticker{overflow:hidden}
  .hub-link{transition:none}
}