/* * dasham-fx.css — Player-portal Dasham FF8-animations * * Bruger individuelle CSS transform-properties (translate/scale/rotate som * separate animatable props på Safari 16.6+) for kontinuerlig bevægelse uden * stutter. Y er strengt monoton, landing-bouncen er en pure scaleY-deformation. * * Keyframe-procenter er udregnet for at matche FF8-trofast timing inden for * 600ms placement-window: * - 42% (≈250ms) : scale-peak 1.20 + tilt-peak -10° * - 92% (≈550ms) : scale tilbage til 1.0, tilt 0°, Y nået target * - 96% (≈575ms) : landing-squish (scaleY 0.92, scaleX 1.06) * - 100% (600ms) : settled * * Tokens på :root så dasham-fx.js kan override pr. runtime hvis nødvendigt. * Reduced-motion: alle hd-dasham-fx-* anims → 0ms via @media-query. * * @layer components */ @layer components { :root { /* Timing-tokens (matcher public/js/config.js DASHAM_FX_*) */ --hd-dasham-fx-placement-ms: 600ms; --hd-dasham-fx-flip-ms: 500ms; --hd-dasham-fx-combo-ring-delay-ms: 500ms; --hd-dasham-fx-text-burst-fade-ms: 500ms; --hd-dasham-fx-text-burst-display-ms: 1200ms; --hd-dasham-fx-score-ticker-ms: 800ms; --hd-dasham-fx-result-fade-ms: 750ms; --hd-dasham-fx-screen-shake-ms: 350ms; --hd-dasham-fx-screen-shake-px: 6px; /* Easing-tokens */ --hd-dasham-fx-ease-translate: cubic-bezier(0.33, 0, 0.2, 1); --hd-dasham-fx-ease-scale-rise: cubic-bezier(0.4, 0, 0.6, 1); --hd-dasham-fx-ease-scale-fall: cubic-bezier(0.5, 0, 0.5, 1); --hd-dasham-fx-ease-flip-in: cubic-bezier(0.5, 0, 0.6, 0.5); --hd-dasham-fx-ease-flip-out: cubic-bezier(0.4, 0.5, 0.5, 1); --hd-dasham-fx-ease-burst-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* Layer z-indexing — flying-card skal være over board men under modals */ --hd-dasham-fx-z-flying: 4200; --hd-dasham-fx-z-text-burst: 4300; --hd-dasham-fx-z-result-banner: 4400; /* Per-instance translate-target — sættes via dasham-fx.js inline style */ --hd-dasham-fx-tx: 0px; --hd-dasham-fx-ty: 0px; } /* ==================================================================== * Placement — kort flyver fra hånd til board-celle (A3-profilen) * ==================================================================== * Tre uafhængige animation-properties på SAMME element. Browseren * kompositorer hver kanal selvstændigt → ingen mutex på `transform:`. */ @keyframes hd-dasham-fx-place-translate { 0% { translate: 0 0; } 100% { translate: var(--hd-dasham-fx-tx) var(--hd-dasham-fx-ty); } } @keyframes hd-dasham-fx-place-scale { 0% { scale: 1; } 42% { scale: 1.20; } /* peak ~250ms in */ 92% { scale: 1; } /* tilbage til 1.0 inden landing */ 96% { scale: 1.06 0.92; } /* landing-squish (Y-komp) */ 100% { scale: 1; } } @keyframes hd-dasham-fx-place-rotate { 0% { rotate: 0deg; } 42% { rotate: -10deg; } /* tilt-peak under opstigning */ 92% { rotate: 0deg; } /* rotation udlignet inden landing */ 100% { rotate: 0deg; } } @keyframes hd-dasham-fx-place-opacity { 0%, 100% { opacity: 1; } } /** * Klassen sættes på en clone af det placerede hånd-kort. Klonen position- * fixed'es i viewport ved hånd-card's bounding rect, og --hd-dasham-fx-tx/ty * sættes til delta-vektoren til target-cellen. Animation-properties kører * parallelt, hver med sin egen easing-kurve. */ .hd-dasham-fx-flying-card { position: fixed; z-index: var(--hd-dasham-fx-z-flying); pointer-events: none; will-change: translate, scale, rotate; /* Hardware-promotion — sikrer compositor-layer på Safari 16.6 */ transform: translateZ(0); animation: hd-dasham-fx-place-translate var(--hd-dasham-fx-placement-ms) var(--hd-dasham-fx-ease-translate) both, hd-dasham-fx-place-scale var(--hd-dasham-fx-placement-ms) var(--hd-dasham-fx-ease-scale-rise) both, hd-dasham-fx-place-rotate var(--hd-dasham-fx-placement-ms) var(--hd-dasham-fx-ease-scale-rise) both, hd-dasham-fx-place-opacity var(--hd-dasham-fx-placement-ms) linear both; } /* ==================================================================== * Flip — 3D rotateY 0→180° med farveswap ved 90° + kant-lys * ==================================================================== * Cellen er perspective-host. Kortet roterer; ved 90° (midpoint) er det * usynligt (backface-visibility) — det er det punkt vi swapper farveklasse * via JS så bagside-billedet er den NYE ejer-farve. * * Kant-lys: en absolut-positioneret radial-gradient over kortet der pulser * sammen med rotationen — narrativ "lys løber langs kanten". */ @keyframes hd-dasham-fx-flip-rotate { 0% { rotate: y 0deg; } 50% { rotate: y 90deg; } /* JS swapper farveklasse her */ 100% { rotate: y 180deg; } } @keyframes hd-dasham-fx-flip-edge-light { 0% { opacity: 0; } 25% { opacity: 0.6; } /* lys topper midt under rotation */ 75% { opacity: 0.6; } 100% { opacity: 0; } } .hd-dasham-fx-flipping { /* 3D-stack er sat på cellen via .dasham-cell { perspective; preserve-3d } */ will-change: rotate; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: hd-dasham-fx-flip-rotate var(--hd-dasham-fx-flip-ms) var(--hd-dasham-fx-ease-flip-in) both; } .hd-dasham-fx-flipping::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: radial-gradient( ellipse at center, transparent 60%, rgba(251, 191, 36, 0.4) 78%, rgba(251, 191, 36, 0.8) 92%, transparent 100% ); pointer-events: none; opacity: 0; animation: hd-dasham-fx-flip-edge-light var(--hd-dasham-fx-flip-ms) linear both; } /* ==================================================================== * Tekst-burst — ENS! / PLUS! / KOMBO! * ==================================================================== */ @keyframes hd-dasham-fx-text-burst { 0% { opacity: 0; scale: 0.9; } 25% { opacity: 1; scale: 1.15; } /* overshoot ind */ 35% { scale: 1.0; } /* settle */ 75% { opacity: 1; scale: 1.0; } /* hold display */ 100% { opacity: 0; scale: 1.0; } /* fade ud */ } .hd-dasham-fx-text-burst { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: var(--hd-dasham-fx-z-text-burst); font-family: var(--hd-font-display, system-ui, sans-serif); font-weight: var(--hd-dasham-fx-burst-weight, 900); font-size: var(--hd-dasham-fx-burst-size, clamp(2.5rem, 8vw, 4.5rem)); color: var(--hd-color-rarity-legendary, #ffd9a8); text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(251, 191, 36, 0.6), 2px 2px 0 #7f1d1d; letter-spacing: 0.05em; will-change: opacity, scale; /* Total duration = fade-in + display + fade-out — beregnet i JS men token-baseret */ animation: hd-dasham-fx-text-burst calc( var(--hd-dasham-fx-text-burst-fade-ms) + var(--hd-dasham-fx-text-burst-display-ms) + var(--hd-dasham-fx-text-burst-fade-ms) ) var(--hd-dasham-fx-ease-burst-pop) both; } /* ==================================================================== * Screen-shake — kun på combo ≥ DASHAM_FX_SCREEN_SHAKE_MIN_COMBO * ==================================================================== */ @keyframes hd-dasham-fx-screen-shake { 0% { translate: 0 0; } 10% { translate: calc(-1 * var(--hd-dasham-fx-screen-shake-px)) calc(0.5 * var(--hd-dasham-fx-screen-shake-px)); } 20% { translate: var(--hd-dasham-fx-screen-shake-px) calc(-0.5 * var(--hd-dasham-fx-screen-shake-px)); } 30% { translate: calc(-0.7 * var(--hd-dasham-fx-screen-shake-px)) calc(0.3 * var(--hd-dasham-fx-screen-shake-px)); } 40% { translate: calc(0.7 * var(--hd-dasham-fx-screen-shake-px)) calc(-0.3 * var(--hd-dasham-fx-screen-shake-px)); } 50% { translate: calc(-0.5 * var(--hd-dasham-fx-screen-shake-px)) 0; } 60% { translate: calc(0.5 * var(--hd-dasham-fx-screen-shake-px)) 0; } 70% { translate: calc(-0.3 * var(--hd-dasham-fx-screen-shake-px)) 0; } 80% { translate: calc(0.3 * var(--hd-dasham-fx-screen-shake-px)) 0; } 90% { translate: calc(-0.1 * var(--hd-dasham-fx-screen-shake-px)) 0; } 100% { translate: 0 0; } } .hd-dasham-fx-screen-shake { animation: hd-dasham-fx-screen-shake var(--hd-dasham-fx-screen-shake-ms) cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } /* ==================================================================== * Score-counter ticker — tæller op til ny værdi * ==================================================================== */ @keyframes hd-dasham-fx-score-pulse { 0% { scale: 1; color: var(--hd-color-text, currentColor); } 50% { scale: 1.15; color: var(--hd-color-rarity-legendary, #ffd9a8); } 100% { scale: 1; color: var(--hd-color-text, currentColor); } } .hd-dasham-fx-score-pulsing { animation: hd-dasham-fx-score-pulse var(--hd-dasham-fx-score-ticker-ms) ease-out both; will-change: scale; } /* ==================================================================== * Game-end result-banner — SEJR! / Nederlag / Uafgjort * ==================================================================== */ @keyframes hd-dasham-fx-result-fade-in { 0% { opacity: 0; scale: 0.9; } 100% { opacity: 1; scale: 1.0; } } .hd-dasham-fx-result-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(20, 14, 32, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: var(--hd-dasham-fx-z-result-banner); will-change: opacity, scale; animation: hd-dasham-fx-result-fade-in var(--hd-dasham-fx-result-fade-ms) ease-out both; } .hd-dasham-fx-result-banner__title { font-family: var(--hd-font-display, system-ui, sans-serif); font-weight: var(--hd-dasham-fx-result-title-weight, 900); font-size: var(--hd-dasham-fx-result-title-size, clamp(3rem, 10vw, 5.5rem)); letter-spacing: 0.05em; text-shadow: 0 0 12px rgba(0, 0, 0, 0.95), 0 0 24px rgba(251, 191, 36, 0.5), 3px 3px 0 #7f1d1d; } .hd-dasham-fx-result-banner--sejr .hd-dasham-fx-result-banner__title { color: var(--hd-color-rarity-legendary, #ffd9a8); } .hd-dasham-fx-result-banner--nederlag .hd-dasham-fx-result-banner__title { color: var(--hd-color-rarity-common, #d4b070); } .hd-dasham-fx-result-banner--uafgjort .hd-dasham-fx-result-banner__title { color: var(--hd-color-text, currentColor); } .hd-dasham-fx-result-banner__scores { display: flex; gap: 2rem; font-family: var(--hd-font-mono); font-size: var(--hd-dasham-fx-result-score-size, clamp(1.25rem, 3vw, 1.75rem)); color: var(--hd-color-text-muted, #aaa); } /* ==================================================================== * Reduced-motion override * ==================================================================== * Når brugeren har reduced-motion aktivt: 0ms varighed på ALLE FX-anims. * DashamFx-modulets reduced-motion-gate sørger også for at den ikke * spawner clone-elementer i første omgang, men dette dæk-bælte beskytter * mod runtime-toggle (`(prefers-reduced-motion: reduce)` ændring mid-game). */ @media (prefers-reduced-motion: reduce) { :root { --hd-dasham-fx-placement-ms: 0ms; --hd-dasham-fx-flip-ms: 0ms; --hd-dasham-fx-combo-ring-delay-ms: 0ms; --hd-dasham-fx-text-burst-fade-ms: 0ms; --hd-dasham-fx-text-burst-display-ms: 0ms; --hd-dasham-fx-score-ticker-ms: 0ms; --hd-dasham-fx-result-fade-ms: 0ms; --hd-dasham-fx-screen-shake-ms: 0ms; --hd-dasham-fx-screen-shake-px: 0px; } } }