/* Original 3D cartoon artwork + a quiet sports language throughout the site.
   Stage coordinates and sprite atlas are controlled by brand-motion.js. */
:root { --brand-cream: #f8f5e9; --brand-gold: #e7c574; }
body.intro-active { overflow: hidden; overscroll-behavior: none; }
.opening {
  --mx: 0; --my: 0; --intro-progress: 0; --intro-turn: 0deg; --drag-y: 0px;
  position: fixed; inset: 0; z-index: 100; isolation: isolate; overflow: hidden; overflow: clip;
  background: radial-gradient(ellipse at 76% 38%, #316548 0%, #123e2c 32%, #071f18 75%);
  color: var(--brand-cream); outline: none; touch-action: none; cursor: grab;
  user-select: none; overscroll-behavior: none;
  opacity: calc(1 - var(--intro-progress) * .88);
  transition: opacity .12s linear, visibility .6s;
}
.opening.done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s; }
.opening.is-dragging { cursor: grabbing; }
.opening-field {
  position: absolute; inset: 46% -25% -40%; opacity: .18;
  background: repeating-linear-gradient(90deg, transparent 0 105px, #adbc9b 106px 107px, transparent 108px 210px), repeating-linear-gradient(0deg, transparent 0 98px, #adbc9b 99px 100px, transparent 101px 200px);
  transform: perspective(600px) rotateX(58deg) rotateZ(-11deg); transform-origin: center top;
  mask-image: linear-gradient(transparent, #000 30%, transparent);
}
.opening-lights { position: absolute; inset: -10%; pointer-events: none; opacity: .35; background: conic-gradient(from 159deg at 80% 0%, transparent 0deg, #a9d1ad44 12deg, transparent 26deg, transparent 55deg, #f2ce7724 65deg, transparent 80deg); animation: stadium-breath 8s ease-in-out infinite alternate; }
.opening-brand { position: absolute; left: 5.5vw; top: 5.5vh; display: flex; align-items: center; gap: 12px; z-index: 3; }
.opening-brand img { width: 48px; height: 48px; }
.opening-brand > span { font-family: 'Space Grotesk', sans-serif; font-size: 25px; font-weight: 600; letter-spacing: -.065em; line-height: 1.1; }
.opening-brand small { display: block; color: #b6c9b3; font: 9px 'DM Sans', sans-serif; letter-spacing: .22em; margin-top: 7px; }
.opening-copy { position: absolute; left: 5.5vw; top: 30%; z-index: 3; max-width: 41%; pointer-events: none; transform: translate3d(calc(var(--mx) * -.13px), calc(var(--my) * -.13px), 0); }
.eyebrow { font-size: 10px; letter-spacing: .18em; color: var(--brand-gold); font-weight: 700; }
.opening h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(46px, 5.7vw, 88px); line-height: .98; letter-spacing: -.065em; margin: 23px 0; }
.opening h1 em { font-style: normal; color: var(--brand-gold); }
.opening-copy p { color: #b6cbbd; font-size: 15px; line-height: 1.65; max-width: 290px; }
.opening-cup-wrap.match-stage {
  position: absolute; right: -1.5%; top: 50%; margin: 0; width: min(68vw, 1050px);
  height: auto; aspect-ratio: 10 / 7; display: block; z-index: 2; perspective: 1200px;
  transform: translateY(-42%); rotate: calc(var(--intro-turn) * .3);
  translate: calc(var(--mx) * .22px) calc(var(--my) * .18px + var(--drag-y));
  transition: translate .12s linear, rotate .12s linear;
}
.opening.is-dragging .match-stage { transition: none; }
.match-halo { position: absolute; width: 62%; aspect-ratio: 1; border: 1px solid #dabb5b35; border-radius: 50%; right: 1%; top: 1%; box-shadow: 0 0 0 35px #dabb5b05, 0 0 0 85px #dabb5b03; }
.match-pitch { position: absolute; left: 1%; right: 2%; bottom: 1%; height: 29%; border: 1px solid #b1c49b32; border-radius: 50%; background: radial-gradient(ellipse, #57805d55, transparent 68%); transform: rotate(-7deg); box-shadow: inset 0 0 25px #b4d98a10; }
.match-player { position: absolute; width: 38%; aspect-ratio: 1; left: 2%; bottom: 2%; z-index: 4; will-change: transform; }
.mascot-sprite { width: 100%; aspect-ratio: 1; background-image: url('./assets/brand/mascot-actions.webp'); background-size: 300% 200%; background-position: 0 0; background-repeat: no-repeat; }
.match-player .mascot-sprite { filter: drop-shadow(2px 8px 3px #071b1838); }
.match-player-shadow { position: absolute; bottom: 4%; left: 8%; width: 25%; height: 3%; background: #05181055; border-radius: 50%; filter: blur(7px); }
.match-cup { position: absolute; width: 57%; left: 44%; top: 4%; z-index: 3; transform-style: preserve-3d; filter: drop-shadow(7px 25px 15px #04171055); animation: cup-breathe 6s ease-in-out infinite; }
.match-cup img { display: block; width: 100%; height: auto; }
.match-ball { position: absolute; left: 29%; top: 90%; width: 9%; aspect-ratio: 1; z-index: 5; will-change: transform; transform: translate(-50%, -50%); filter: drop-shadow(2px 4px 3px #001b1938); }
.match-ball img { display: block; width: 100%; height: 100%; }
.match-ball-shadow { position: absolute; top: 93%; width: 8%; height: 2%; background: #021c17; border-radius: 50%; filter: blur(4px); }
.match-trajectory { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; filter: drop-shadow(0 0 6px #f2ce7799); }
.match-impact { position: absolute; width: 17%; aspect-ratio: 1; left: 63.5%; top: 14%; border: 2px solid var(--brand-gold); border-radius: 50%; z-index: 6; opacity: 0; pointer-events: none; }
.match-confetti { position: absolute; left: 72%; top: 26%; z-index: 6; pointer-events: none; }
.match-confetti i { position: absolute; width: 5px; height: 5px; border-radius: 1px; opacity: 0; background: var(--brand-gold); }
.match-confetti i:nth-child(3n) { background: #d3e8c7; border-radius: 50%; }
.match-score { position: absolute; top: 12%; left: 15%; z-index: 5; width: 24%; text-align: center; transform: rotate(-7deg); }
.match-score-label { display: block; font-size: clamp(8px, .65vw, 11px); letter-spacing: .2em; color: #c2d4bc; }
.match-score-word { display: block; margin-top: 8px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(18px, 2.5vw, 40px); color: var(--brand-gold); font-weight: 600; letter-spacing: -.055em; line-height: 1.1; }
.match-score-dots { display: flex; gap: 5px; justify-content: center; margin-top: 13px; }
.match-score-dots i { width: 4px; height: 4px; border-radius: 50%; background: #e7c57450; }
[data-state='ready'] .match-score-dots i:first-child, [data-state='shoot'] .match-score-dots i:nth-child(2), [data-state='score'] .match-score-dots i:last-child { background: var(--brand-gold); box-shadow: 0 0 8px #e7c57480; }
[data-state='score'] .match-impact { animation: goal-ring 850ms ease-out both; }
[data-state='score'] .match-confetti i { animation: goal-confetti 1300ms var(--delay) ease-out both; }
[data-state='score'] .match-cup { animation: cup-goal 900ms ease-out both; }
[data-state='score'] .match-score-word { animation: score-pop 650ms cubic-bezier(.18,.9,.35,1.4) both; }
.opening-skip { position: absolute; left: 5.5vw; right: auto; bottom: 7vh; display: flex; gap: 18px; align-items: center; z-index: 7; color: var(--brand-cream); max-width: 85vw; font-size: 12px; }
.opening-skip > span:last-child { width: 37px; height: 52px; border-radius: 99px; border: 1px solid #e7c57460; display: grid; place-items: center; color: var(--brand-gold); font-size: 20px; animation: hint-nudge 2s ease-in-out infinite; }
.opening-shot { position: absolute; right: 5.5vw; bottom: 7vh; z-index: 7; color: var(--brand-gold); background: #0b2b2080; border: 1px solid #e7c57450; border-radius: 999px; padding: 14px 21px; font-size: 12px; transition: background .25s, transform .25s; }
.opening-shot:hover { background: #e7c57418; transform: translateY(-3px); }
.opening-shot:focus-visible { outline: 2px solid var(--brand-cream); outline-offset: 5px; }
.opening-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #ffffff10; z-index: 8; }
.opening-progress span { display: block; height: 100%; width: calc(var(--intro-progress) * 100%); background: var(--brand-gold); transition: width .12s linear; }
@keyframes stadium-breath { to { transform: rotate(7deg); opacity: .5; } }
@keyframes cup-breathe { 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes cup-goal { 0% { transform: scale(1); } 20% { transform: scale(1.025) rotate(-2deg); } 45% { transform: scale(.99) rotate(1deg); } 100% { transform: scale(1); } }
@keyframes goal-ring { 0% { transform: scale(.2); opacity: .8; } 100% { transform: scale(2); opacity: 0; } }
@keyframes goal-confetti { 0% { opacity: 1; transform: rotate(var(--angle)) translateX(0) rotate(0deg); } 100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--distance)) rotate(180deg); } }
@keyframes score-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hint-nudge { 50% { transform: translateY(6px); } }

/* The motion identity repeats at smaller scale without replacing real product photos. */
.brand-mark { width: 43px; height: 43px; border-radius: 11px; box-shadow: none; }
.brand-name { font-size: 22px; font-weight: 600; letter-spacing: -.055em; }
.brand-name span { color: inherit; }
.brand:hover .brand-mark { transform: rotate(-6deg); }
.brand-mark, .nav a, .product-visual img { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.nav a { position: relative; }
.nav a::after { content: ''; position: absolute; height: 1.5px; width: 100%; left: 0; bottom: -7px; background: var(--brand-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.product-card { transition: transform .45s, box-shadow .45s; }
.product-card:hover { transform: translateY(-7px); box-shadow: 0 24px 45px #103c2b12; }
.product-card:hover .product-visual img { transform: scale(1.06) rotate(-2deg); }
.product-visual::after { content: ''; position: absolute; inset: 13%; border: 1px solid #ddb75b50; border-radius: 50%; transform: rotate(-20deg) scaleX(.92); pointer-events: none; transition: transform .5s; }
.product-card:hover .product-visual::after { transform: rotate(15deg) scaleX(1.04); }
.hero-art { isolation: isolate; }
.home-brand-mascot { position: absolute; width: 225px; left: -11%; bottom: -7%; z-index: 3; pointer-events: none; animation: mascot-idle 4s ease-in-out infinite; }
.home-brand-mascot .mascot-sprite { filter: drop-shadow(5px 13px 6px #0b2b2030); }
.home-brand-mascot > img { width: 44px; position: absolute; bottom: -1%; right: 13%; animation: small-ball-roll 5s ease-in-out infinite; }
.page-hero { overflow: hidden; position: relative; }
.page-hero > .container { position: relative; padding-inline-end: min(25vw, 300px); }
.page-hero h1 { position: relative; z-index: 2; }
.page-brand-art { position: absolute; width: 265px; right: -10px; bottom: -35px; pointer-events: none; }
.page-brand-art .mascot-sprite { position: relative; z-index: 1; filter: drop-shadow(4px 8px 5px #103c2b18); animation: mascot-idle 5s ease-in-out infinite; }
.brand-orbit { position: absolute; width: 94%; height: 94%; border: 1px solid #d6b56a65; border-radius: 50%; transform: rotate(-25deg) scaleX(.86); }
.page-brand-ball { position: absolute; width: 42px; right: 7%; bottom: -2px; z-index: 2; animation: small-ball-roll 6s ease-in-out infinite; }
.brand-signature { width: min(1180px,90vw); margin: 10px auto 60px; display: flex; gap: 16px; align-items: center; color: var(--forest); position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
.brand-signature > img { width: 35px; }
.brand-signature > span:first-of-type { font: 500 clamp(17px,2vw,24px) 'Space Grotesk',sans-serif; letter-spacing: -.035em; }
.brand-replay { margin-inline-start: auto; padding: 8px 0; color: var(--forest); background: transparent; font-size: 11px; font-weight: 600; }
.brand-replay:hover { color: #92732d; }
.signature-line { width: 45px; height: 45px; border: 1px solid var(--brand-gold); border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(-25deg); margin-inline-start: 10px; }
.brand-success { position: relative; min-height: 76px; padding-inline-start: 85px; }
.brand-success .mascot-sprite { position: absolute; width: 70px; left: 6px; bottom: 0; }
.brand-success:not([hidden]) .mascot-sprite { animation: mascot-cheer .65s ease-out; }
.footer { position: relative; overflow: hidden; }
.footer::before { content: ''; pointer-events: none; position: absolute; right: -90px; top: 60px; width: 360px; height: 200px; border: 1px solid #e7c57416; border-radius: 50%; transform: rotate(-25deg); }
.brand-page-enter > section:first-child { animation: page-arrive .5s ease-out both; }
.brand-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--reveal-delay) ease, transform .6s var(--reveal-delay) ease; }
.brand-revealed { opacity: 1; transform: translateY(0); }
@keyframes mascot-idle { 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes small-ball-roll { 50% { transform: translateX(8px) rotate(35deg); } }
@keyframes mascot-cheer { 45% { transform: translateY(-9px) rotate(-4deg); } }
@keyframes page-arrive { from { opacity: .4; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
html[dir='rtl'] .page-brand-art { right: auto; left: -10px; }
html[dir='rtl'] .opening-copy { direction: rtl; }
html[dir='rtl'] .brand-success .mascot-sprite { right: 6px; left: auto; }
@media (max-width: 980px) {
  .opening-copy { max-width: 40%; top: 30%; }
  .opening h1 { font-size: clamp(40px,5.5vw,65px); }
  .opening-cup-wrap.match-stage { width: 72vw; right: -8%; }
  .opening-brand > span { font-size: 23px; }
  .home-brand-mascot { left: 4%; width: 200px; }
  .page-hero > .container { padding-inline-end: 215px; }
  .page-brand-art { width: 210px; }
  .brand-name { font-size: 20px; }
}
@media (max-width: 720px) {
  .opening-brand { top: max(24px, env(safe-area-inset-top)); left: 7vw; gap: 10px; }
  .opening-brand img { width: 39px; height: 39px; }
  .opening-brand > span { font-size: 22px; }
  .opening-brand small { font-size: 7px; margin-top: 5px; }
  .opening-copy { top: 16%; left: 7vw; max-width: 86%; }
  .opening h1 { font-size: clamp(38px,10.2vw,62px); margin: 15px 0 14px; }
  .opening-copy p { font-size: 12px; max-width: 270px; line-height: 1.5; }
  .opening .eyebrow { font-size: 8px; letter-spacing: .12em; }
  .opening-cup-wrap.match-stage { width: 107vw; top: auto; bottom: 13%; right: -4%; transform: none; margin: 0; }
  .match-score { top: 16%; left: 12%; width: 27%; }
  .match-score-label { font-size: 8px; letter-spacing: .1em; }
  .match-score-word { font-size: 18px; }
  .match-score-dots { margin-top: 8px; }
  .match-halo { top: 0; }
  .opening-skip { left: 7vw; bottom: max(4vh, env(safe-area-inset-bottom)); gap: 13px; font-size: 11px; }
  .opening-skip > span:last-child { width: 28px; height: 40px; font-size: 17px; }
  .opening-shot { right: 7vw; bottom: calc(max(4vh, env(safe-area-inset-bottom)) + 52px); padding: 10px 13px; font-size: 10px; }
  .opening-skip { right: 7vw; max-width: 86vw; font-size: 11px; gap: 9px; justify-content: space-between; }
  .brand-mark { width: 37px; height: 37px; }
  .home-brand-mascot { width: 165px; left: -5%; bottom: -2%; }
  .home-brand-mascot > img { width: 32px; }
  .page-hero { padding-top: 55px; padding-bottom: 70px; }
  .page-hero > .container { padding-inline-end: 0; }
  .page-hero h1 { font-size: clamp(34px,9vw,53px); }
  .page-hero p { max-width: 100%; position: relative; z-index: 2; }
  .page-brand-art { position: relative; width: 140px; height: 120px; margin: 20px 0 -35px auto; right: auto; bottom: auto; }
  .page-brand-art .mascot-sprite { width: 140px; }
  .page-brand-ball { width: 25px; }
  .brand-orbit { width: 120px; height: 120px; }
  .brand-signature { flex-wrap: wrap; gap: 10px; margin-bottom: 35px; }
  .brand-signature > span:first-of-type { font-size: 18px; }
  .brand-replay { margin-inline-start: 45px; width: calc(100% - 45px); text-align: start; }
  .signature-line { display: none; }
  html[dir='rtl'] .page-brand-art { left: auto; margin-left: auto; }
}
@media (max-height: 600px) and (min-width: 721px) {
  .opening-brand { top: 5vh; }
  .opening-copy { top: 27%; }
  .opening h1 { font-size: 48px; }
  .opening-cup-wrap.match-stage { width: 57vw; right: 1%; }
  .opening-skip { bottom: 5vh; }
}
@media (prefers-reduced-motion: reduce) {
  .opening *, .brand-page-enter *, .footer::before { animation: none !important; }
  .opening, .opening-cup-wrap.match-stage, .opening-progress span { transition: none !important; }
  .opening-copy { transform: none; }
  .brand-reveal { opacity: 1; transform: none; transition: none; }
  .product-card:hover, .product-card:hover .product-visual img { transform: none; }
}