/* KFB V15 — cinematic football experience layer. Native CSS only. */
:root{
  --cine-ease:cubic-bezier(.16,1,.3,1);
  --cine-ease-sharp:cubic-bezier(.77,0,.18,1);
  --cine-dark:#020914;
  --cine-navy:#04152e;
  --cine-red:var(--club-primary,#b4020a);
  --cine-blue:var(--club-secondary,#002f86);
  --cine-glow:rgba(123,178,255,.18);
  --cine-scene-y:0px;
}
body{overflow-x:hidden;background:#fff}.kfb-page-shell{position:relative;overflow:clip}
/* ---- hero as opening football film ---- */
.kfb-cinematic-hero{position:relative;min-height:clamp(720px,86vh,960px);background:#020914;overflow:hidden;isolation:isolate}
.kfb-hero-media{position:absolute;inset:-4%;z-index:0;overflow:hidden;transform:translateZ(0)}
.kfb-cinematic-hero .kfb-hero-photo,.kfb-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;will-change:transform,filter;transform:scale(1.05) translate3d(var(--hero-pan-x,0px),calc(var(--hero-shift,0px) + var(--hero-pan-y,0px)),0);filter:saturate(1.02) contrast(1.06);transition:opacity .65s ease}
.kfb-hero-video{z-index:2}.kfb-hero-video+.kfb-hero-photo{z-index:1}.kfb-hero-video:not([src]){display:none}
.kfb-cinematic-hero .kfb-hero-overlay{z-index:3;background:linear-gradient(90deg,rgba(2,8,19,.22) 0%,rgba(2,8,19,.12) 38%,rgba(1,8,24,.72) 68%,rgba(1,8,24,.94) 100%),linear-gradient(0deg,rgba(1,7,18,.72) 0%,transparent 42%)}
.kfb-cinema-vignette{position:absolute;inset:-5%;z-index:4;pointer-events:none;box-shadow:inset 0 0 180px 54px rgba(0,0,0,.5);mix-blend-mode:multiply}
.kfb-film-grain{position:absolute;inset:0;z-index:5;opacity:.08;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:kfb-grain .28s steps(2) infinite}
@keyframes kfb-grain{0%{transform:translate(0)}25%{transform:translate(-1.2%,1%)}50%{transform:translate(1%,-1.2%)}75%{transform:translate(.8%,1.2%)}100%{transform:translate(-.8%,-.5%)}}
.kfb-stadium-beam{position:absolute;z-index:5;top:-34%;width:32vw;height:150%;opacity:.13;filter:blur(5px);pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(97,155,255,.13) 52%,transparent 82%);transform-origin:50% 0;mix-blend-mode:screen}
.kfb-stadium-beam.beam-a{left:3%;transform:rotate(18deg);animation:kfb-beam-a 8s ease-in-out infinite alternate}.kfb-stadium-beam.beam-b{right:3%;transform:rotate(-18deg);animation:kfb-beam-b 10s 1s ease-in-out infinite alternate}
@keyframes kfb-beam-a{to{transform:translateX(18vw) rotate(6deg);opacity:.22}}@keyframes kfb-beam-b{to{transform:translateX(-17vw) rotate(-5deg);opacity:.2}}
.kfb-letterbox{position:absolute;left:0;right:0;height:8vh;z-index:25;background:#01040a;pointer-events:none;transform:scaleY(1);transition:transform 1.1s .12s var(--cine-ease)}.kfb-letterbox.top{top:0;transform-origin:top}.kfb-letterbox.bottom{bottom:0;transform-origin:bottom}.kfb-loaded.cinematic-intro-enabled .kfb-letterbox{transform:scaleY(0)}
.kfb-cinematic-hero .kfb-hero-content{position:relative;z-index:8;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(410px,.8fr);grid-template-rows:auto 1fr auto;align-items:center;gap:16px;padding-top:clamp(72px,8vh,110px);padding-bottom:150px;min-height:clamp(720px,86vh,960px)}
.kfb-cinematic-hero .kfb-hero-badge{grid-column:1/-1;align-self:start;width:max-content;backdrop-filter:blur(14px);background:rgba(1,10,30,.48);border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.kfb-hero-cinema-copy{grid-column:2;grid-row:2;color:#fff;align-self:center;max-width:650px;text-shadow:0 4px 24px rgba(0,0,0,.28)}
.kfb-cinema-kicker{display:inline-flex;align-items:center;gap:10px;color:#dce9ff;font-size:clamp(11px,1vw,14px);font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}.kfb-cinema-kicker:before{content:"";width:42px;height:3px;background:var(--cine-red);box-shadow:20px 0 0 rgba(255,255,255,.55)}
.kfb-hero-cinema-copy h1{margin:0;font-family:Impact,"Arial Narrow",system-ui,sans-serif;font-size:clamp(54px,6vw,96px);line-height:.88;letter-spacing:-.025em;text-transform:uppercase}.kfb-hero-cinema-copy h1 strong,.kfb-hero-cinema-copy h1 em{display:block;font-style:normal}.kfb-hero-cinema-copy h1 em{color:#fff;-webkit-text-stroke:1px rgba(255,255,255,.08)}.kfb-hero-cinema-copy p{max-width:580px;margin:24px 0 0;font-size:clamp(17px,1.35vw,22px);line-height:1.5;color:#edf3ff;font-weight:550}
.kfb-cinematic-hero .kfb-hero-spacer{display:none}.kfb-cinematic-hero .kfb-hero-actions{grid-column:2;grid-row:3;display:flex;gap:12px;align-self:end;margin-bottom:18px}.kfb-cinematic-hero .kfb-btn{min-height:70px;min-width:230px;box-shadow:0 20px 48px rgba(0,0,0,.24);backdrop-filter:blur(8px)}
.kfb-cinematic-hero [data-cine]{opacity:0;transform:translate3d(0,26px,0)}.kfb-loaded .kfb-cinematic-hero [data-cine="badge"]{animation:cine-copy-in .8s .25s var(--cine-ease) forwards}.kfb-loaded .kfb-cinematic-hero [data-cine="copy"]{animation:cine-copy-in .95s .52s var(--cine-ease) forwards}.kfb-loaded .kfb-cinematic-hero [data-cine="actions"]{animation:cine-copy-in .85s .78s var(--cine-ease) forwards}@keyframes cine-copy-in{to{opacity:1;transform:none}}
.kfb-cinematic-hero .kfb-hero-tabs{z-index:12}.kfb-cinematic-hero .kfb-hero-tabs-inner>a{position:relative;overflow:hidden;background:rgba(2,9,22,.66);backdrop-filter:blur(16px)}.kfb-cinematic-hero .kfb-hero-tabs-inner>a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--cine-red),var(--cine-blue));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--cine-ease)}.kfb-cinematic-hero .kfb-hero-tabs-inner>a:hover:after{transform:scaleX(1)}
/* live film ribbon */
.kfb-cinematic-ribbon{overflow:hidden;background:#050b16;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);height:44px;display:flex;align-items:center;position:relative;z-index:20}.kfb-cinematic-ribbon:before,.kfb-cinematic-ribbon:after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:90px}.kfb-cinematic-ribbon:before{left:0;background:linear-gradient(90deg,#050b16,transparent)}.kfb-cinematic-ribbon:after{right:0;background:linear-gradient(-90deg,#050b16,transparent)}.kfb-cinematic-ribbon-track{display:flex;align-items:center;gap:28px;width:max-content;white-space:nowrap;animation:kfb-cine-ribbon 32s linear infinite;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.kfb-cinematic-ribbon-track i{font-style:normal;color:var(--cine-red);font-size:18px}@keyframes kfb-cine-ribbon{to{transform:translateX(-50%)}}
/* ---- every front-end section behaves like a scene ---- */
.kfb-page-shell>section:not(.kfb-cinematic-hero),.section,.page-hero,.kfb-page-hero{position:relative;isolation:isolate;--scene-light-x:50%;--scene-light-y:50%}
[data-cine-scene]{overflow:clip}.js [data-cine-scene]:not(.cine-scene-in) .kfb-section-title,.js [data-cine-scene]:not(.cine-scene-in) .section-head-pro,.js [data-cine-scene]:not(.cine-scene-in) .page-head{opacity:0;transform:translate3d(-34px,0,0)}
[data-cine-scene] .kfb-section-title,[data-cine-scene] .section-head-pro,[data-cine-scene] .page-head{transition:opacity .8s var(--cine-ease),transform .8s var(--cine-ease)}
[data-cine-scene].cine-scene-in .kfb-section-title,[data-cine-scene].cine-scene-in .section-head-pro,[data-cine-scene].cine-scene-in .page-head{opacity:1;transform:none}
[data-cine-scene]:before{content:"";position:absolute;z-index:-1;width:min(65vw,900px);aspect-ratio:1;border-radius:50%;left:calc(var(--scene-light-x) - 32vw);top:calc(var(--scene-light-y) - 32vw);background:radial-gradient(circle,rgba(40,107,220,.075),transparent 64%);opacity:0;transform:scale(.7);transition:opacity 1.1s ease,transform 1.3s var(--cine-ease);pointer-events:none}[data-cine-scene].cine-scene-in:before{opacity:1;transform:scale(1)}
.kfb-scene-number{position:absolute;right:clamp(14px,3vw,48px);top:clamp(18px,3vw,44px);z-index:1;display:flex;align-items:center;gap:9px;color:rgba(6,24,54,.22);font-size:10px;font-weight:950;letter-spacing:.18em;text-transform:uppercase;pointer-events:none}.kfb-scene-number b{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(32px,4vw,64px);line-height:.75;color:rgba(6,24,54,.07)}.kfb-dark-section .kfb-scene-number,.kfb-gallery-section .kfb-scene-number,.kfb-commercial-section .kfb-scene-number{color:rgba(255,255,255,.35)}.kfb-dark-section .kfb-scene-number b,.kfb-gallery-section .kfb-scene-number b,.kfb-commercial-section .kfb-scene-number b{color:rgba(255,255,255,.08)}
/* cinematic cuts between scenes */
.kfb-scene-cut{height:0;position:relative;z-index:15}.kfb-scene-cut:before,.kfb-scene-cut:after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(135,171,225,.45),var(--cine-red),rgba(135,171,225,.45),transparent);transform:scaleX(0);transition:transform .9s var(--cine-ease)}.kfb-scene-cut:before{top:-1px}.kfb-scene-cut.cine-cut-in:before{transform:scaleX(1)}
/* image/camera language */
.kfb-news-photo,.kfb-news-thumb,.kfb-player-img,.kfb-gallery-grid>a,.home-transfer-photo,.event-card-media,.video-media,.kfb-tv-photo,.kfb-community-photo{transform-origin:center;will-change:transform;backface-visibility:hidden}.cine-scene-in .kfb-news-photo,.cine-scene-in .kfb-gallery-grid>a,.cine-scene-in .kfb-community-photo{animation:kfb-camera-drift 9s ease-in-out infinite alternate}@keyframes kfb-camera-drift{to{transform:scale(1.055) translate3d(.6%,-.45%,0)}}
.kfb-cine-tilt{transform:perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateZ(0);transition:transform .22s ease,box-shadow .35s ease;transform-style:preserve-3d}.kfb-cine-tilt:hover{box-shadow:0 26px 65px rgba(2,16,44,.16)}
/* club TV becomes a film strip */
.kfb-cinema-media{position:relative;overflow:hidden}.kfb-card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease,transform 1.8s var(--cine-ease);transform:scale(1.035);z-index:1}.kfb-cinema-media.is-video-playing .kfb-card-video{opacity:1;transform:scale(1)}.kfb-cinema-media .kfb-play,.kfb-cinema-media>span{z-index:4}.kfb-media-scan{position:absolute;inset:-30% 0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 38%,rgba(255,255,255,.11) 49%,transparent 60%);transform:translateY(-45%);opacity:.7}.kfb-cinema-media.is-video-playing .kfb-media-scan{animation:kfb-scan 2.8s linear infinite}@keyframes kfb-scan{to{transform:translateY(45%)}}
.video-card .video-media{overflow:hidden}.video-card .video-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(2,8,18,.42),transparent 42%);opacity:.6;transition:opacity .3s}.video-card:hover .video-media:after{opacity:.28}.video-detail-card video{background:#020914;box-shadow:0 28px 90px rgba(0,0,0,.2);border-radius:14px;outline:1px solid rgba(255,255,255,.08)}
/* match cards enter like broadcast graphics */
.kfb-match-panel,.fixture-card,.kfb-match-teams,.home-event-card,.home-transfer-card{position:relative;overflow:hidden}.cine-scene-in .fixture-card,.cine-scene-in .home-event-card,.cine-scene-in .home-transfer-card{animation:kfb-scoreboard-in .7s var(--cine-ease) both}@keyframes kfb-scoreboard-in{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-16px)}to{opacity:1;clip-path:inset(0);transform:none}}
/* richer buttons without clutter */
.kfb-btn,.btn,.kfb-small-button,.kfb-white-button,.kfb-card-cta{overflow:hidden}.kfb-btn:before,.btn:before,.kfb-small-button:before,.kfb-white-button:before{content:"";position:absolute;top:-20%;bottom:-20%;width:42%;left:-55%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent);transform:skewX(-18deg);transition:left .7s var(--cine-ease);pointer-events:none}.kfb-btn:hover:before,.btn:hover:before,.kfb-small-button:hover:before,.kfb-white-button:hover:before{left:115%}
/* footer closes like film credits */
.kfb-footer{position:relative;overflow:hidden}.kfb-footer:before{content:"KFB • EKPOMA • FOOTBALL • FUTURE";position:absolute;right:-2vw;top:12px;color:rgba(255,255,255,.028);font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(54px,9vw,150px);line-height:1;white-space:nowrap;pointer-events:none}
/* motion mode tuning */
body.motion-calm .kfb-film-grain,body.motion-calm .kfb-stadium-beam{display:none}body.motion-calm .kfb-cinematic-ribbon-track{animation-duration:54s}body.motion-calm .cine-scene-in .kfb-news-photo,body.motion-calm .cine-scene-in .kfb-gallery-grid>a,body.motion-calm .cine-scene-in .kfb-community-photo{animation:none}
body.motion-energetic .kfb-stadium-beam.beam-a{animation-duration:5.5s}body.motion-energetic .kfb-stadium-beam.beam-b{animation-duration:6.5s}body.motion-energetic .kfb-cinematic-ribbon-track{animation-duration:22s}body.motion-energetic .kfb-film-grain{opacity:.11}
/* page hero transition on inner pages */
.page-hero,.kfb-page-hero{background-attachment:scroll;clip-path:inset(0 0 0 0)}.kfb-loaded .page-hero,.kfb-loaded .kfb-page-hero{animation:kfb-inner-hero .9s var(--cine-ease) both}@keyframes kfb-inner-hero{from{clip-path:inset(0 0 100% 0);filter:brightness(.65)}to{clip-path:inset(0);filter:none}}
/* responsive cinema */
@media(max-width:1050px){.kfb-cinematic-hero .kfb-hero-content{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;align-content:center}.kfb-hero-cinema-copy{grid-column:1;grid-row:2;justify-self:end;width:min(70%,650px)}.kfb-cinematic-hero .kfb-hero-actions{grid-column:1;justify-self:end;width:min(70%,650px)}.kfb-stadium-beam{width:42vw}.kfb-scene-number{display:none}}
@media(max-width:760px){.kfb-cinematic-hero{min-height:760px}.kfb-cinematic-hero .kfb-hero-content{min-height:760px;padding-top:46px;padding-bottom:175px;align-content:end}.kfb-hero-cinema-copy{width:100%;align-self:end;justify-self:stretch;padding-top:240px}.kfb-hero-cinema-copy h1{font-size:clamp(46px,13vw,70px)}.kfb-hero-cinema-copy p{font-size:16px;max-width:92%}.kfb-cinematic-hero .kfb-hero-actions{width:100%;justify-self:stretch;grid-template-columns:1fr 1fr;display:grid}.kfb-cinematic-hero .kfb-btn{min-width:0}.kfb-cinematic-hero .kfb-hero-overlay{background:linear-gradient(0deg,rgba(1,7,20,.98) 8%,rgba(1,7,20,.8) 43%,rgba(1,7,20,.08) 76%),linear-gradient(90deg,rgba(1,7,20,.12),rgba(1,7,20,.36))}.kfb-cinematic-hero .kfb-hero-photo,.kfb-hero-video{object-position:42% center}.kfb-stadium-beam{display:none}.kfb-film-grain{opacity:.045}.kfb-cinematic-ribbon{height:40px}.kfb-cinematic-ribbon-track{font-size:9px;gap:20px}.cine-scene-in .kfb-news-photo,.cine-scene-in .kfb-gallery-grid>a,.cine-scene-in .kfb-community-photo{animation:none}}
@media(max-width:520px){.kfb-cinematic-hero{min-height:720px}.kfb-cinematic-hero .kfb-hero-content{min-height:720px;padding-bottom:170px}.kfb-hero-cinema-copy{padding-top:220px}.kfb-cinema-kicker{font-size:9px}.kfb-hero-cinema-copy h1{font-size:clamp(42px,12.8vw,60px)}.kfb-cinematic-hero .kfb-hero-actions{grid-template-columns:1fr}.kfb-cinematic-hero .kfb-btn{min-height:58px}.kfb-letterbox{height:5vh}}
@media(hover:none),(pointer:coarse){.kfb-cine-tilt{transform:none!important}.kfb-card-video{display:none}.cine-scene-in .kfb-news-photo,.cine-scene-in .kfb-gallery-grid>a,.cine-scene-in .kfb-community-photo{animation:none}}
@media(prefers-reduced-motion:reduce){.kfb-film-grain,.kfb-stadium-beam,.kfb-letterbox,.kfb-cinematic-ribbon-track{animation:none!important}.kfb-letterbox{display:none}.kfb-cinematic-ribbon-track{transform:none}.kfb-cinematic-hero [data-cine]{opacity:1!important;transform:none!important;animation:none!important}[data-cine-scene]:before{display:none}.cine-scene-in .kfb-news-photo,.cine-scene-in .kfb-gallery-grid>a,.cine-scene-in .kfb-community-photo{animation:none!important}.kfb-card-video{display:none!important}}
/* cinematic opening / preloader enhancement */
.cinematic-intro-enabled .kfb-preloader{background:radial-gradient(circle at 50% 100%,rgba(14,73,142,.32),transparent 38%),#020712;overflow:hidden}.cinematic-intro-enabled .kfb-preloader:before{content:"";position:absolute;left:50%;bottom:-36vh;width:76vh;height:76vh;border:2px solid rgba(255,255,255,.07);border-radius:50%;transform:translateX(-50%) rotateX(68deg);box-shadow:0 0 0 11vh rgba(255,255,255,.012),0 0 0 22vh rgba(255,255,255,.008)}.cinematic-intro-enabled .kfb-preloader:after{content:"";position:absolute;inset:0;background:linear-gradient(104deg,transparent 15%,rgba(108,169,255,.11) 27%,transparent 39%),linear-gradient(256deg,transparent 17%,rgba(255,255,255,.09) 29%,transparent 41%);animation:kfb-prelight 2.2s ease-in-out infinite alternate;pointer-events:none}@keyframes kfb-prelight{to{transform:translateX(3%);opacity:.7}}.cinematic-intro-enabled .kfb-preloader-inner{position:relative;z-index:2}.cinematic-intro-enabled .kfb-preloader-title{font-size:clamp(25px,4vw,38px);font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:.035em;text-transform:uppercase}.cinematic-intro-enabled .kfb-preloader-sub{letter-spacing:.24em;text-transform:uppercase;font-size:10px;color:#9fb3cc}