/* BlackCopper homepage intro: seven different opening scenes (data-fx on .bci), a new one on every visit.
   net = the original constellation (bc-home-v3.css). The others: aurora, circuit, scan, warp, grid, dust. */
.bci__logo { position: relative; }
.bci__fx { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; display: none; }
.bci__laser { display: none; }
@keyframes fxShow { to { opacity: 1; transform: none; } }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }

/* aurora / scan / warp / dust show the finished logo pieces at once; the scene animates the logo as a whole.
   circuit and grid animate each piece themselves. */
.bci:is([data-fx="aurora"], [data-fx="scan"], [data-fx="warp"], [data-fx="dust"]).is-play .bci-l,
.bci:is([data-fx="aurora"], [data-fx="scan"], [data-fx="warp"], [data-fx="dust"]).is-play .bci-tri,
.bci:is([data-fx="aurora"], [data-fx="scan"], [data-fx="warp"], [data-fx="dust"]).is-play .bci-bar { animation: fxShow 1ms linear var(--fx-t0, .1s) forwards; }
.bci:is([data-fx="aurora"], [data-fx="scan"], [data-fx="warp"], [data-fx="dust"]).is-play .bci-line { animation: bciLine 1ms linear var(--fx-t0, .1s) forwards; }
.bci:is([data-fx="aurora"], [data-fx="scan"], [data-fx="warp"], [data-fx="dust"]).is-play .bci-ring,
.bci:is([data-fx="aurora"], [data-fx="scan"], [data-fx="warp"], [data-fx="dust"]).is-play .bci-arc { animation: bciDraw 1ms linear var(--fx-t0, .1s) forwards; }

/* ============ aurora: drifting light, logo comes into focus, a copper sheen runs through the letters ============ */
.bci[data-fx="aurora"] { background: #05060b; }
.bci[data-fx="aurora"] .bci__fx { display: block; }
.bci[data-fx="aurora"] .bci__fx i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; }
.bci[data-fx="aurora"] .bci__fx i:nth-child(1) { left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, #1f6fa6, transparent); animation: fxDrift1 16s ease-in-out infinite alternate; }
.bci[data-fx="aurora"] .bci__fx i:nth-child(2) { right: -20vmax; top: -6vmax; background: radial-gradient(closest-side, #b8703c, transparent); animation: fxDrift2 19s ease-in-out infinite alternate; }
.bci[data-fx="aurora"] .bci__fx i:nth-child(3) { left: 18vmax; bottom: -34vmax; background: radial-gradient(closest-side, #127a7a, transparent); opacity: .4; animation: fxDrift3 22s ease-in-out infinite alternate; }
.bci[data-fx="aurora"] .bci__fx i:nth-child(4) { left: 50%; top: 50%; width: 120vmax; height: 26vmax; margin: -13vmax 0 0 -60vmax; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(110, 190, 255, .22), rgba(230, 167, 116, .22), transparent); filter: blur(40px); animation: fxRibbon 14s ease-in-out infinite alternate; }
@keyframes fxDrift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes fxDrift2 { to { transform: translate(-12vmax, 14vmax) scale(.9); } }
@keyframes fxDrift3 { to { transform: translate(-16vmax, -8vmax) scale(1.2); } }
@keyframes fxRibbon { from { transform: rotate(-14deg) translateY(-6vmax); } to { transform: rotate(10deg) translateY(5vmax); } }
.bci[data-fx="aurora"]:not(.is-done) .bci__svg { opacity: 0; }
.bci[data-fx="aurora"].is-play .bci__svg { animation: fxFocus 1.7s cubic-bezier(.2, .7, .2, 1) .15s forwards; }
@keyframes fxFocus { 0% { opacity: 0; filter: blur(24px); transform: scale(1.1); } 60% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; } }
.bci[data-fx="aurora"] .bci__logo::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 917 / 343; background: linear-gradient(105deg, transparent 38%, #c8834e 46%, #ffd9b5 50%, #c8834e 54%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 130% 0; pointer-events: none;
  -webkit-mask-image: var(--fxm); mask-image: var(--fxm); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }   /* only the letters (logo layers as masks) catch the sheen */
.bci[data-fx="aurora"].is-play .bci__logo::after { animation: fxSheen 1.6s cubic-bezier(.45, 0, .2, 1) 1.5s forwards, fxSheen 2.2s cubic-bezier(.45, 0, .2, 1) 9s infinite; }
@keyframes fxSheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ============ circuit: traces grow from the edges (canvas), then the logo powers on piece by piece ============ */
.bci[data-fx="circuit"] { background: radial-gradient(110% 90% at 50% 40%, #071318 0%, #03070a 60%, #000 100%); }
.bci[data-fx="circuit"] { --fx-t0: 1.25s; }
.bci[data-fx="circuit"].is-play .bci-ring { animation: bciDraw .7s cubic-bezier(.65, 0, .35, 1) 1.15s forwards; }
.bci[data-fx="circuit"].is-play .bci-arc { animation: bciDraw .5s cubic-bezier(.65, 0, .35, 1) 1.55s forwards; }
.bci[data-fx="circuit"].is-play .bci-marks { animation: fxFlick .9s linear 1.45s forwards; }
.bci[data-fx="circuit"].is-play .bci-black { animation: fxFlick .9s linear 1.6s forwards; }
.bci[data-fx="circuit"].is-play .bci-copper { animation: fxFlick .9s linear 1.75s forwards; }
.bci[data-fx="circuit"].is-play .bci-tri { animation: fxFlick .7s linear 1.95s forwards; }
.bci[data-fx="circuit"].is-play .bci-line { animation: bciLine .5s cubic-bezier(.65, 0, .35, 1) 2s forwards; }
.bci[data-fx="circuit"].is-play .bci-tag { animation: fxFlick .8s linear 2.15s forwards; }
.bci[data-fx="circuit"].is-play .bci-bar { animation: fxFlick .6s linear 2.3s forwards; }
@keyframes fxFlick { 0% { opacity: 0; transform: none; } 8% { opacity: 1; } 14% { opacity: .15; } 24% { opacity: 1; } 30% { opacity: .35; } 42%, 100% { opacity: 1; transform: none; } }
.bci[data-fx="circuit"].is-play .bci__svg { animation: fxNeon 1.2s ease-out 2.5s; }
@keyframes fxNeon { 30% { filter: drop-shadow(0 0 14px rgba(111, 195, 255, .75)); } 100% { filter: none; } }

/* ============ scan: barcode field + a laser that scans the logo into view ============ */
.bci[data-fx="scan"] { background: radial-gradient(100% 80% at 50% 42%, #140a0c 0%, #070405 60%, #000 100%); }
.bci[data-fx="scan"] .bci__fx { display: block; }
.bci[data-fx="scan"] .bci__fx::before { content: ""; position: absolute; inset: -10% -20%; opacity: .55;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 5px, rgba(255, 255, 255, .045) 5px 9px, transparent 9px 11px, rgba(255, 255, 255, .07) 11px 12px, transparent 12px 17px, rgba(255, 255, 255, .05) 17px 21px, transparent 21px 26px);
  -webkit-mask: radial-gradient(70% 60% at 50% 45%, transparent 22%, #000 70%); mask: radial-gradient(70% 60% at 50% 45%, transparent 22%, #000 70%);
  animation: fxBars 30s linear infinite; }
@keyframes fxBars { to { transform: translateX(-26px); } }
.bci[data-fx="scan"] .bci__fx::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgba(255, 48, 72, .07), transparent); animation: fxSweep 7s ease-in-out 2.4s infinite; }
@keyframes fxSweep { 0% { top: -30%; } 60%, 100% { top: 110%; } }
.bci[data-fx="scan"] .bci__laser { display: block; position: absolute; left: -4%; right: -4%; top: 0; height: 3px; border-radius: 2px; background: #ff3048; box-shadow: 0 0 10px 2px rgba(255, 48, 72, .9), 0 0 40px 8px rgba(255, 48, 72, .35); opacity: 0; pointer-events: none; }
.bci[data-fx="scan"]:not(.is-done) .bci__svg { clip-path: inset(0 0 100% 0); }
.bci[data-fx="scan"].is-play .bci__svg { animation: fxReveal 1.5s cubic-bezier(.45, .05, .55, .95) .35s forwards, fxBeep .6s ease-out 1.9s; }
.bci[data-fx="scan"].is-play .bci__laser { animation: fxLaser 1.5s cubic-bezier(.45, .05, .55, .95) .35s forwards, fxRescan 2.2s ease-in-out 8s infinite; }
@keyframes fxReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes fxLaser { 0% { top: 0; opacity: 1; } 92% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fxRescan { 0% { top: 0; opacity: 0; } 8% { opacity: .55; } 85% { top: 100%; opacity: .55; } 100% { top: 100%; opacity: 0; } }
@keyframes fxBeep { 0% { filter: drop-shadow(0 0 0 rgba(255, 48, 72, 0)); } 30% { filter: drop-shadow(0 0 18px rgba(255, 48, 72, .55)); } 100% { filter: none; } }

/* ============ warp: hyperspace stars (canvas), logo flies in from deep space ============ */
.bci[data-fx="warp"] { background: radial-gradient(90% 70% at 50% 45%, #050b1a 0%, #010206 70%, #000 100%); }
.bci[data-fx="warp"]:not(.is-done) .bci__svg { opacity: 0; }
.bci[data-fx="warp"].is-play .bci__svg { animation: fxZoom 1.5s cubic-bezier(.16, 1, .3, 1) .55s forwards; }
@keyframes fxZoom { 0% { opacity: 0; transform: scale(.06); filter: blur(8px); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; filter: blur(0); } }
.bci[data-fx="warp"].is-play .bci-ring { animation: bciDraw 1.2s cubic-bezier(.16, 1, .3, 1) .6s forwards, fxSpin 1.6s cubic-bezier(.16, 1, .3, 1) .6s; }
@keyframes fxSpin { from { transform: rotate(-450deg); } to { transform: rotate(-90deg); } }
.bci[data-fx="warp"] .bci__fx { display: block; }
.bci[data-fx="warp"] .bci__fx i:nth-child(1) { position: absolute; left: 8%; top: 12%; width: 46vmax; height: 30vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 90, 200, .28), transparent); filter: blur(30px); animation: fxDrift1 24s ease-in-out infinite alternate; }
.bci[data-fx="warp"] .bci__fx i:nth-child(2) { position: absolute; right: 4%; bottom: 6%; width: 40vmax; height: 26vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 110, 160, .16), transparent); filter: blur(34px); animation: fxDrift2 28s ease-in-out infinite alternate; }
.bci[data-fx="warp"] .bci__glow { background: radial-gradient(closest-side, rgba(110, 160, 255, .22), rgba(200, 131, 78, .06) 55%, transparent 72%); }

/* ============ grid: perspective floor + horizon glow, logo pieces arrive from every side ============ */
.bci[data-fx="grid"] { background: linear-gradient(180deg, #03050c 0%, #070a18 52%, #0a0712 100%); }
.bci[data-fx="grid"] .bci__fx { display: block; }
.bci[data-fx="grid"] .bci__fx::before { content: ""; position: absolute; left: -50%; right: -50%; bottom: -4%; height: 20%; transform-origin: 50% 0; transform: perspective(380px) rotateX(60deg);
  background-image: linear-gradient(rgba(46, 138, 192, .55) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(46, 138, 192, .45) 1.5px, transparent 1.5px);
  background-size: 64px 64px; -webkit-mask: linear-gradient(180deg, transparent 0%, #000 45%); mask: linear-gradient(180deg, transparent 0%, #000 45%); animation: fxFloor 2.6s linear infinite; }
@keyframes fxFloor { to { background-position: 0 64px; } }
.bci[data-fx="grid"] .bci__fx::after { content: ""; position: absolute; left: 0; right: 0; top: 84%; height: 2px; background: linear-gradient(90deg, transparent, #e6a774 30%, #fff1e2 50%, #e6a774 70%, transparent); box-shadow: 0 0 40px 14px rgba(200, 131, 78, .35); }
.bci[data-fx="grid"] .bci__glow { top: 84%; background: radial-gradient(closest-side, rgba(200, 131, 78, .22), rgba(46, 138, 192, .08) 55%, transparent 72%); }
.bci[data-fx="grid"] .bci-marks { transform: translateX(-300px) rotate(-200deg); }
.bci[data-fx="grid"] .bci-black { transform: translateY(-160px); }
.bci[data-fx="grid"] .bci-copper { transform: translateY(170px); }
.bci[data-fx="grid"] .bci-tri { transform: translate(160px, -120px) rotate(90deg); transform-origin: 835px 54px; }
.bci[data-fx="grid"] .bci-tag { transform: translateX(-220px); }
.bci[data-fx="grid"] .bci-bar { transform: translateX(260px); }
.bci[data-fx="grid"].is-play .bci-ring { animation: bciDraw .9s cubic-bezier(.65, 0, .35, 1) .2s forwards; }
.bci[data-fx="grid"].is-play .bci-arc { animation: bciDraw .7s cubic-bezier(.65, 0, .35, 1) .6s forwards; }
.bci[data-fx="grid"].is-play .bci-marks { animation: fxShow .9s cubic-bezier(.2, 1.25, .4, 1) .35s forwards; }
.bci[data-fx="grid"].is-play .bci-black { animation: fxShow .8s cubic-bezier(.2, 1.3, .4, 1) .6s forwards; }
.bci[data-fx="grid"].is-play .bci-copper { animation: fxShow .8s cubic-bezier(.2, 1.3, .4, 1) .75s forwards; }
.bci[data-fx="grid"].is-play .bci-tri { animation: fxShow .7s cubic-bezier(.2, 1.4, .4, 1) 1.05s forwards; }
.bci[data-fx="grid"].is-play .bci-line { animation: bciLine .6s cubic-bezier(.65, 0, .35, 1) 1.2s forwards; }
.bci[data-fx="grid"].is-play .bci-tag { animation: fxShow .7s cubic-bezier(.2, 1.2, .4, 1) 1.35s forwards; }
.bci[data-fx="grid"].is-play .bci-bar { animation: fxShow .6s cubic-bezier(.2, 1.3, .4, 1) 1.5s forwards; }
.bci[data-fx="grid"].is-play .bci__svg { animation: fxGlitch .45s steps(3) 2.05s; }
@keyframes fxGlitch { 0% { filter: drop-shadow(-4px 0 0 rgba(255, 48, 90, .8)) drop-shadow(4px 0 0 rgba(46, 160, 255, .8)); transform: translateX(3px); } 50% { filter: drop-shadow(3px 0 0 rgba(255, 48, 90, .7)) drop-shadow(-3px 0 0 rgba(46, 160, 255, .7)); transform: translateX(-2px); } 100% { filter: none; transform: none; } }

/* ============ dust: particles (canvas) gather into the logo, then the real logo takes over ============ */
.bci[data-fx="dust"] { background: radial-gradient(110% 90% at 50% 40%, #0d0b10 0%, #060507 60%, #000 100%); }
.bci[data-fx="dust"]:not(.is-done) .bci__svg { opacity: 0; }
.bci[data-fx="dust"].is-play .bci__svg { animation: fxFade .7s ease-out 2.05s forwards; }
.bci[data-fx="dust"] .bci__glow { background: radial-gradient(closest-side, rgba(200, 131, 78, .16), rgba(46, 138, 192, .08) 55%, transparent 72%); }

/* =====================================================================================================
   16 more scenes (2026-11-11). Each sets data-fx (background) and data-in (how the logo arrives).
   Backgrounds are CSS here; animated layers are drawn on the canvas by bc-home-fx.js.
   ===================================================================================================== */
.bci__lead { text-shadow: 0 1px 14px rgba(0, 0, 0, .75); }
.bci[data-in].is-play .bci-l, .bci[data-in].is-play .bci-tri, .bci[data-in].is-play .bci-bar { animation: fxShow 1ms linear .05s forwards; }
.bci[data-in].is-play .bci-line { animation: bciLine 1ms linear .05s forwards; }
.bci[data-in].is-play .bci-ring, .bci[data-in].is-play .bci-arc { animation: bciDraw 1ms linear .05s forwards; }

/* ---------- logo entrances ---------- */
.bci[data-in]:not(.is-done) .bci__svg { opacity: 0; }
.bci[data-in="rise"].is-play .bci__svg { animation: fxRise 1.8s cubic-bezier(.2, .8, .2, 1) .5s forwards; }
@keyframes fxRise { 0% { opacity: 1; clip-path: inset(100% 0 0 0); transform: translateY(60px); } 100% { opacity: 1; clip-path: inset(0); transform: none; } }
.bci[data-in="land"].is-play .bci__svg { animation: fxLand 1.4s cubic-bezier(.3, 1.35, .45, 1) .45s forwards, fxShake .5s ease-out 1.15s; }
@keyframes fxLand { 0% { opacity: 1; transform: translateY(-70vh) scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes fxShake { 20% { translate: 0 6px; } 40% { translate: 0 -3px; } 60% { translate: 0 2px; } 100% { translate: 0 0; } }
.bci[data-in="glow"].is-play .bci__svg { animation: fxGlowIn 2.2s ease-out .4s forwards; }
@keyframes fxGlowIn { 0% { opacity: 0; filter: brightness(3) blur(14px); } 40% { opacity: 1; } 100% { opacity: 1; filter: none; } }
.bci[data-in="wipe"].is-play .bci__svg { animation: fxWipe 1.6s cubic-bezier(.65, 0, .35, 1) .5s forwards; }
@keyframes fxWipe { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0); } }
.bci[data-in="focus"].is-play .bci__svg { animation: fxFocus 2s cubic-bezier(.2, .7, .2, 1) .35s forwards; }
.bci[data-in="pop"].is-play .bci__svg { animation: fxPop 1.1s cubic-bezier(.2, 1.6, .4, 1) .9s forwards; }
@keyframes fxPop { 0% { opacity: 0; transform: scale(.4); filter: brightness(2.5); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }
.bci[data-in="spin"] .bci__logo { perspective: 900px; }
.bci[data-in="spin"].is-play .bci__svg { animation: fxSpinIn 1.8s cubic-bezier(.16, 1, .3, 1) .5s forwards; }
@keyframes fxSpinIn { 0% { opacity: 0; transform: rotateX(80deg) rotateZ(-25deg) scale(.4); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.bci[data-in="decrypt"]:not(.is-done) .bci__svg { opacity: 1; }
.bci[data-in="decrypt"].is-play .bci-marks { animation: fxFlick .9s steps(6) .7s forwards; }
.bci[data-in="decrypt"].is-play .bci-black { animation: fxFlick .9s steps(6) .95s forwards; }
.bci[data-in="decrypt"].is-play .bci-copper { animation: fxFlick .9s steps(6) 1.2s forwards; }
.bci[data-in="decrypt"].is-play .bci-tri { animation: fxFlick .6s steps(4) 1.45s forwards; }
.bci[data-in="decrypt"].is-play .bci-line { animation: bciLine .6s steps(8) 1.5s forwards; }
.bci[data-in="decrypt"].is-play .bci-tag { animation: fxFlick .8s steps(6) 1.7s forwards; }
.bci[data-in="decrypt"].is-play .bci-bar { animation: fxFlick .6s steps(4) 1.9s forwards; }
.bci[data-in="decrypt"].is-play .bci-ring { animation: bciDraw .9s steps(9) .6s forwards; }
.bci[data-in="decrypt"].is-play .bci-arc { animation: bciDraw .6s steps(6) 1.1s forwards; }
.bci[data-in="neon"].is-play .bci__svg { animation: fxNeonOn 1.6s linear .6s forwards; }
@keyframes fxNeonOn { 0% { opacity: 0; } 6% { opacity: 1; } 10% { opacity: .1; } 18% { opacity: 1; } 22% { opacity: .3; } 34% { opacity: 1; filter: drop-shadow(0 0 16px rgba(255, 120, 200, .8)); } 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 120, 200, .35)); } }
.bci[data-in="heat"].is-play .bci__svg { animation: fxHeat 2.2s ease-out .5s forwards; }
@keyframes fxHeat { 0% { opacity: 0; filter: sepia(1) saturate(5) brightness(.6) blur(6px); } 30% { opacity: 1; filter: sepia(1) saturate(5) brightness(1.3) blur(2px); } 100% { opacity: 1; filter: none; } }
.bci[data-in="holo"].is-play .bci__svg { animation: fxHolo 2s steps(1) .6s forwards, fxHoloIdle 4s ease-in-out 2.6s infinite; }
@keyframes fxHolo { 0% { opacity: .2; transform: scaleY(.02); } 10% { opacity: .7; transform: scaleY(.3); } 20% { opacity: .3; transform: scaleY(.8); } 30% { opacity: .9; transform: none; } 45% { opacity: .5; } 60%, 100% { opacity: 1; transform: none; } }
@keyframes fxHoloIdle { 50% { filter: drop-shadow(0 0 12px rgba(80, 220, 255, .55)); opacity: .93; } }
.bci[data-in="drift"].is-play .bci__svg { animation: fxDriftIn 2.2s cubic-bezier(.2, .7, .2, 1) .4s forwards; }
@keyframes fxDriftIn { 0% { opacity: 0; transform: translateY(-34px) rotate(-3deg); filter: blur(10px); } 100% { opacity: 1; transform: none; filter: none; } }

/* ---------- sun: a real sunrise photograph (Flow) brought to life: dawn brightening, breathing sun, drifting rays and mist,
   a camera lens flare and dust in the light. Layers sit in a box with the photo's own aspect ratio, so they stay on the sun. ---------- */
.bci[data-fx="sun"] { background: #07090f; }
.bci[data-fx="sun"] .bci__glow { display: none; }
.bci[data-fx="sun"] .bci__fx { display: block; container-type: size; }
.bci[data-fx="sun"] .bci__fx > i { display: none; }
.bcn { --ar: 1.7917; --sx: 20.9%; --sy: 56.2%; --z: 1.16; --zo: 100% 56.2%; position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--ar))); height: max(100cqh, calc(100cqw / var(--ar))); translate: -50% -50%; scale: var(--z); transform-origin: var(--zo); opacity: 0; transition: opacity 1.4s ease-out; }
/* the zoom moves the sun out from behind the logo: to the left of it on wide screens, below the buttons on phones */
.bci.is-real .bcn { opacity: 1; }
.bcn > * { position: absolute; pointer-events: none; }
.bcn-photo { inset: 0; background: url("../img/home/sun-wide-1600.webp") center / cover no-repeat; transform-origin: var(--sx) var(--sy); filter: brightness(.45) saturate(.8); }
@media (min-width: 1500px) { .bcn-photo { background-image: url("../img/home/sun-wide-2560.webp"); } }
@media (max-aspect-ratio: 1/1) {
  .bcn { --ar: .5581; --sx: 33.6%; --sy: 64.4%; --z: 1.17; --zo: 33.6% 0%; }
  .bcn-photo { background-image: url("../img/home/sun-tall-1080.webp"); }
}
.bci.is-real .bcn-photo { animation: bcnDawn 4.5s cubic-bezier(.25, .6, .3, 1) forwards, bcnDrift 46s ease-in-out 4.5s infinite alternate; }
@keyframes bcnDawn { from { transform: scale(1.1); filter: brightness(.45) saturate(.8); } to { transform: scale(1); filter: brightness(1) saturate(1); } }
@keyframes bcnDrift { from { transform: scale(1); } to { transform: scale(1.045) translateX(-.6%); } }
/* the sun itself breathes: a soft bloom over the photo's sun */
.bcn-bloom { left: var(--sx); top: var(--sy); width: 46cqmin; height: 46cqmin; margin: -23cqmin 0 0 -23cqmin; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 252, 235, .95), rgba(255, 214, 140, .55) 22%, rgba(255, 170, 80, .16) 52%, transparent 75%); mix-blend-mode: screen; opacity: 0; }
.bci.is-real .bcn-bloom { animation: bcnBloomIn 3.6s ease-out .6s forwards, bcnBreathe 5.5s ease-in-out 4.2s infinite; }
@keyframes bcnBloomIn { from { opacity: 0; transform: scale(.4); } to { opacity: .85; transform: none; } }
@keyframes bcnBreathe { 50% { opacity: .6; transform: scale(1.08); } }
/* god rays through the mist: very soft, slowly turning, fading in and out like light through passing cloud */
.bcn-rays { left: var(--sx); top: var(--sy); width: 260cqmax; height: 260cqmax; margin: -130cqmax 0 0 -130cqmax; background: repeating-conic-gradient(from 90deg, rgba(255, 220, 160, .085) 0 1.6deg, transparent 1.6deg 5.5deg, rgba(255, 220, 160, .05) 5.5deg 6.4deg, transparent 6.4deg 11deg);
  -webkit-mask: radial-gradient(closest-side, #000 2%, rgba(0, 0, 0, .5) 22%, transparent 55%); mask: radial-gradient(closest-side, #000 2%, rgba(0, 0, 0, .5) 22%, transparent 55%); mix-blend-mode: screen; opacity: 0; }
.bci.is-real .bcn-rays { animation: bcnRaysIn 4s ease-out 1.2s forwards, bcnTurn 90s linear 1.2s infinite, bcnFlicker 9s ease-in-out 5s infinite; }
@keyframes bcnRaysIn { to { opacity: 1; } }
@keyframes bcnTurn { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes bcnFlicker { 0%, 100% { opacity: 1; } 35% { opacity: .55; } 60% { opacity: .9; } 80% { opacity: .65; } }
/* morning mist drifting across the valley */
.bcn-mist { left: -20%; width: 140%; height: 34%; top: 54%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 236, 210, .32), transparent 70%); filter: blur(18px); mix-blend-mode: screen; opacity: .0; }
.bcn-mist--2 { top: 66%; height: 26%; background: radial-gradient(45% 50% at 50% 50%, rgba(235, 240, 255, .22), transparent 70%); }
.bci.is-real .bcn-mist { animation: bcnFade 3s ease-out 1s forwards, bcnMist 38s ease-in-out 1s infinite alternate; }
.bci.is-real .bcn-mist--2 { animation: bcnFade 3s ease-out 1.6s forwards, bcnMist 52s ease-in-out -20s infinite alternate-reverse; }
@keyframes bcnFade { to { opacity: 1; } }
@keyframes bcnMist { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
/* camera lens flare: ghosts on the line from the sun through the centre of the frame */
.bcn-flare { width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; mix-blend-mode: screen; opacity: 0;
  left: calc(var(--sx) + (50% - var(--sx)) * var(--k) * 2); top: calc(var(--sy) + (50% - var(--sy)) * var(--k) * 2); }
.bcn-flare--1 { --k: .55; --d: 5cqmin; background: radial-gradient(closest-side, rgba(140, 200, 255, .22), rgba(140, 200, 255, .06) 70%, transparent); }
.bcn-flare--2 { --k: .72; --d: 11cqmin; background: radial-gradient(closest-side, transparent 55%, rgba(255, 200, 140, .12) 70%, transparent); }
.bcn-flare--3 { --k: .9; --d: 3cqmin; background: radial-gradient(closest-side, rgba(255, 240, 200, .3), transparent); }
.bcn-flare--4 { --k: 1.15; --d: 16cqmin; background: radial-gradient(closest-side, rgba(120, 255, 200, .05), rgba(120, 180, 255, .07) 60%, transparent); }
.bci.is-real .bcn-flare { animation: bcnFlare 3s ease-out 2.2s forwards, bcnFlareIdle 7s ease-in-out 5.2s infinite; }
@keyframes bcnFlare { to { opacity: 1; } }
@keyframes bcnFlareIdle { 50% { opacity: .55; } }
/* keep the logo, line and buttons readable over the bright horizon */
.bci[data-fx="sun"] .bci__inner::before { content: ""; position: absolute; left: 50%; top: 52%; width: 120%; height: 95%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(4, 8, 18, .42), rgba(4, 8, 18, .18) 60%, transparent); }
/* the logo arrives with the light, bigger in this scene, and keeps a warm rim light from the sun on its left */
.bci[data-fx="sun"] .bci__logo { width: min(1000px, 92vw); }
@media (max-width: 767px) { .bci[data-fx="sun"] .bci__logo { width: 94vw; } }
.bci[data-in="dawn"].is-play .bci__svg { animation: bcnLogo 2.4s cubic-bezier(.2, .7, .2, 1) 1s forwards; }
@keyframes bcnLogo { 0% { opacity: 0; filter: blur(8px) brightness(1.6); transform: translateY(12px); } 100% { opacity: 1; transform: none; filter: drop-shadow(-3px 1px 5px rgba(255, 190, 110, .55)) drop-shadow(0 0 26px rgba(255, 170, 90, .22)); } }
/* sunlight on the letters (masked by the logo layers): a warm wash from the sun's side, plus a beam that sweeps across */
.bci[data-fx="sun"] .bci__logo::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 917 / 343; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 214, 150, .0) 43%, #ffd79a 48%, #fff4dc 50%, #ffd79a 52%, rgba(255, 214, 150, 0) 57%, transparent 60%) no-repeat, linear-gradient(90deg, rgba(255, 196, 120, .78) 0%, rgba(255, 210, 150, .35) 26%, rgba(255, 220, 170, 0) 52%) no-repeat;
  background-size: 260% 100%, 100% 100%; background-position: 125% 0, 0 0;
  -webkit-mask-image: var(--fxm); mask-image: var(--fxm); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.bci[data-fx="sun"].is-play .bci__logo::after { animation: bcnWash 2.2s ease-out 2.4s forwards, bcnBeam 2.6s cubic-bezier(.45, 0, .25, 1) 3s forwards, bcnBeam 3s cubic-bezier(.45, 0, .25, 1) 10s infinite; }
@keyframes bcnWash { to { opacity: 1; } }
@keyframes bcnBeam { from { background-position: 125% 0, 0 0; } to { background-position: -25% 0, 0 0; } }
/* a star glint where the sunlight catches the ring */
.bci[data-fx="sun"] .bci__logo::before { content: ""; position: absolute; z-index: 2; left: 6.9%; top: 15.5%; width: 9%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 240, 210, .9) 8%, rgba(255, 210, 150, .25) 30%, transparent 60%), linear-gradient(90deg, transparent 0 46%, rgba(255, 250, 235, .95) 49% 51%, transparent 54%), linear-gradient(0deg, transparent 0 46%, rgba(255, 250, 235, .95) 49% 51%, transparent 54%);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, transparent 100%); }
.bci[data-fx="sun"].is-play .bci__logo::before { animation: bcnGlint 1.6s ease-out 3.2s, bcnGlint 1.6s ease-out 9.2s infinite; }
@keyframes bcnGlint { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 30% { opacity: 1; transform: scale(1.15) rotate(25deg); } 100% { opacity: 0; transform: scale(.4) rotate(60deg); } }

/* the line under the logo: an elegant serif that lights up letter by letter, then a golden horizon line opens beneath it */
.bci[data-fx="sun"] .bci__lead { font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .015em; color: #ffe9cc; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); max-width: 760px; }
.bci[data-fx="sun"].is-play .bci__lead { animation: bciRise 1ms linear 2.5s forwards; }
.bcn-w { display: inline-block; white-space: nowrap; }
.bcn-ch { display: inline-block; opacity: 0; }
.bci[data-fx="sun"].is-play .bcn-ch { animation: bcnCh 1.1s cubic-bezier(.2, .7, .2, 1) calc(2.6s + var(--i) * 45ms) forwards; }
@keyframes bcnCh { 0% { opacity: 0; transform: translateY(.45em); filter: blur(6px); color: #fff6e0; text-shadow: 0 0 22px rgba(255, 200, 120, 1); } 55% { opacity: 1; color: #ffd28a; text-shadow: 0 0 16px rgba(255, 190, 110, .9); } 100% { opacity: 1; transform: none; filter: none; color: #ffe9cc; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); } }
.bci[data-fx="sun"] .bci__lead::after { content: ""; display: block; height: 1.5px; width: 0; margin: 16px auto 0; background: linear-gradient(90deg, transparent, #ffcf8a 30%, #fff1d8 50%, #ffcf8a 70%, transparent); box-shadow: 0 0 12px rgba(255, 190, 110, .7); }
.bci[data-fx="sun"].is-play .bci__lead::after { animation: bcnLine 1.8s cubic-bezier(.65, 0, .35, 1) 3.6s forwards; }
@keyframes bcnLine { to { width: min(440px, 72%); } }
.bcn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- sea: night ocean, moon path on the water (waves on canvas) ---------- */
.bci[data-fx="sea"] { background: linear-gradient(180deg, #020611 0%, #06142a 45%, #0a2440 62%, #031020 100%); }
.bci[data-fx="sea"] .bci__fx { display: block; }
.bci[data-fx="sea"] .bci__fx i:nth-child(1) { position: absolute; right: 14%; top: 9%; width: 9vmin; height: 9vmin; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffaf0, #dfe6f2 60%, #b9c3d6); box-shadow: 0 0 60px 20px rgba(200, 220, 255, .28); }

/* ---------- mars: rust sky, dust storm, planet surface on canvas ---------- */
.bci[data-fx="mars"] { background: linear-gradient(180deg, #12060a 0%, #3a1410 40%, #7a2e18 72%, #a8481f 100%); }
.bci[data-fx="mars"] .bci__glow { background: radial-gradient(closest-side, rgba(255, 140, 80, .18), transparent 70%); }

/* ---------- moon: huge moon behind the scene (canvas) ---------- */
.bci[data-fx="moon"] { background: radial-gradient(90% 80% at 70% 30%, #0e1626 0%, #050810 60%, #000 100%); }
.bci[data-fx="moon"] .bci__glow { background: radial-gradient(closest-side, rgba(200, 215, 255, .14), transparent 70%); }

/* ---------- rain: city bokeh, rain and lightning (canvas) ---------- */
.bci[data-fx="rain"] { background: linear-gradient(180deg, #070b12 0%, #0c1420 55%, #111a26 100%); }
.bci[data-fx="rain"] .bci__fx { display: block; }
.bci[data-fx="rain"] .bci__fx i { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .5; }
.bci[data-fx="rain"] .bci__fx i:nth-child(1) { left: 6%; bottom: 10%; width: 14vmin; height: 14vmin; background: #e6a774; }
.bci[data-fx="rain"] .bci__fx i:nth-child(2) { left: 30%; bottom: 4%; width: 9vmin; height: 9vmin; background: #2e8ac0; }
.bci[data-fx="rain"] .bci__fx i:nth-child(3) { right: 22%; bottom: 12%; width: 12vmin; height: 12vmin; background: #c0405a; }
.bci[data-fx="rain"] .bci__fx i:nth-child(4) { right: 4%; bottom: 3%; width: 16vmin; height: 16vmin; background: #f2d06b; opacity: .35; }

/* ---------- snow ---------- */
.bci[data-fx="snow"] { background: linear-gradient(180deg, #0a1424 0%, #142a44 60%, #1e3a58 100%); }
.bci[data-fx="snow"] .bci__glow { background: radial-gradient(closest-side, rgba(190, 225, 255, .18), transparent 70%); }

/* ---------- fireworks ---------- */
.bci[data-fx="fireworks"] { background: radial-gradient(120% 90% at 50% 100%, #10081c 0%, #05030a 60%, #000 100%); }

/* ---------- galaxy ---------- */
.bci[data-fx="galaxy"] { background: radial-gradient(80% 70% at 50% 45%, #0d0820 0%, #04030b 65%, #000 100%); }
.bci[data-fx="galaxy"] .bci__glow { background: radial-gradient(closest-side, rgba(150, 110, 255, .16), rgba(46, 138, 192, .08) 55%, transparent 72%); }

/* ---------- code rain ---------- */
.bci[data-fx="code"] { background: #010508; }
.bci[data-fx="code"] .bci__glow { background: radial-gradient(closest-side, rgba(1, 5, 8, .9), rgba(1, 5, 8, .6) 50%, transparent 75%); animation: none; }

/* ---------- city night: skyline (canvas) + sweeping searchlights ---------- */
.bci[data-fx="city"] { background: linear-gradient(180deg, #05030f 0%, #150a2c 50%, #3a1446 80%, #5a1f4a 100%); }
.bci[data-fx="city"] .bci__fx { display: block; }
.bci[data-fx="city"] .bci__fx i:nth-child(1), .bci[data-fx="city"] .bci__fx i:nth-child(2) { position: absolute; bottom: 10%; width: 14vmin; height: 140vh; transform-origin: 50% 100%; background: linear-gradient(0deg, rgba(160, 200, 255, .22), transparent 80%); clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); }
.bci[data-fx="city"] .bci__fx i:nth-child(1) { left: 18%; animation: fxBeam 9s ease-in-out infinite alternate; }
.bci[data-fx="city"] .bci__fx i:nth-child(2) { right: 18%; animation: fxBeam 11s ease-in-out -4s infinite alternate-reverse; }
@keyframes fxBeam { from { transform: rotate(-24deg); } to { transform: rotate(22deg); } }
.bci[data-fx="city"] .bci__glow { background: radial-gradient(closest-side, rgba(255, 90, 170, .14), transparent 70%); }

/* ---------- tunnel ---------- */
.bci[data-fx="tunnel"] { background: radial-gradient(60% 60% at 50% 45%, #0a1a2e 0%, #02060c 70%, #000 100%); }

/* ---------- fireflies in a night forest ---------- */
.bci[data-fx="fireflies"] { background: linear-gradient(180deg, #02070a 0%, #06141a 55%, #0a1f1c 100%); }
.bci[data-fx="fireflies"] .bci__glow { background: radial-gradient(closest-side, rgba(200, 255, 120, .08), transparent 70%); }

/* ---------- lava ---------- */
.bci[data-fx="lava"] { background: linear-gradient(180deg, #050101 0%, #140403 55%, #2a0702 100%); }
.bci[data-fx="lava"] .bci__glow { top: 100%; background: radial-gradient(closest-side, rgba(255, 90, 20, .35), rgba(255, 60, 0, .1) 60%, transparent 75%); }

/* ---------- hologram: projector beam from below, scanlines over the logo ---------- */
.bci[data-fx="hologram"] { background: radial-gradient(100% 80% at 50% 100%, #031a24 0%, #01080c 60%, #000 100%); }
.bci[data-fx="hologram"] .bci__fx { display: block; }
.bci[data-fx="hologram"] .bci__fx i:nth-child(1) { position: absolute; left: 50%; bottom: 6%; width: 120vmin; height: 78%; margin-left: -60vmin; background: linear-gradient(0deg, rgba(80, 220, 255, .28), rgba(80, 220, 255, .02) 85%); clip-path: polygon(47% 100%, 53% 100%, 100% 0, 0 0); animation: fxBeamOn 1.2s steps(5) .2s both; }
@keyframes fxBeamOn { 0% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: .3; } 100% { opacity: 1; } }
.bci[data-fx="hologram"] .bci__fx i:nth-child(2) { position: absolute; left: 50%; bottom: 3%; width: 36vmin; height: 7vmin; margin-left: -18vmin; border-radius: 50%; border: 2px solid rgba(80, 220, 255, .7); box-shadow: 0 0 30px rgba(80, 220, 255, .6), inset 0 0 20px rgba(80, 220, 255, .5); }
.bci[data-fx="hologram"] .bci__logo::before { content: ""; position: absolute; inset: -6% -3%; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 5px); mix-blend-mode: multiply; animation: fxScanlines 6s linear infinite; }
@keyframes fxScanlines { to { background-position: 0 60px; } }
.bci[data-fx="hologram"] .bci__svg { filter: drop-shadow(0 0 6px rgba(80, 220, 255, .45)); }

/* ---------- sakura: spring dusk, falling petals (canvas) ---------- */
.bci[data-fx="sakura"] { background: linear-gradient(180deg, #120a1c 0%, #2b1430 45%, #4a1f3c 75%, #6a2c48 100%); }
.bci[data-fx="sakura"] .bci__glow { background: radial-gradient(closest-side, rgba(255, 170, 200, .16), transparent 70%); }

/* ---------- eclipse: black disc, corona, diamond ring ---------- */
.bci[data-fx="eclipse"] { background: radial-gradient(70% 70% at 50% 42%, #0a0a14 0%, #020205 70%, #000 100%); }
.bci[data-fx="eclipse"] .bci__fx { display: block; }
.bci[data-fx="eclipse"] { --ex: 30%; --ey: 38%; --er: 9vmin; }
.bci[data-fx="eclipse"] .bci__fx i { position: absolute; border-radius: 50%; }
.bci[data-fx="eclipse"] .bci__fx i:nth-child(1) { left: calc(var(--ex) - var(--er) * 2.06); top: calc(var(--ey) - var(--er) * 2.06); width: calc(var(--er) * 4.12); height: calc(var(--er) * 4.12); background: radial-gradient(circle closest-side, transparent 46%, rgba(255, 245, 225, .95) 48.5%, rgba(255, 210, 150, .5) 54%, rgba(255, 170, 100, .14) 66%, transparent 78%); animation: fxCorona 2.6s ease-out .2s both, fxBreathe 6s ease-in-out 3s infinite; }
@keyframes fxCorona { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: none; } }
@keyframes fxBreathe { 50% { transform: scale(1.05); opacity: .85; } }
.bci[data-fx="eclipse"] .bci__fx i:nth-child(2) { left: calc(var(--ex) - var(--er) * 5); top: calc(var(--ey) - var(--er) * 5); width: calc(var(--er) * 10); height: calc(var(--er) * 10); border-radius: 0; background: repeating-conic-gradient(rgba(255, 220, 170, .12) 0 2deg, transparent 2deg 9deg); -webkit-mask: radial-gradient(closest-side, transparent 18%, #000 22%, transparent 75%); mask: radial-gradient(closest-side, transparent 18%, #000 22%, transparent 75%); animation: fxRays 120s linear infinite, fxFadeIn 3s ease-out 1s both; }
.bci[data-fx="eclipse"] .bci__fx i:nth-child(3) { left: calc(var(--ex) - var(--er)); top: calc(var(--ey) - var(--er)); width: calc(var(--er) * 2); height: calc(var(--er) * 2); background: #000; }
.bci[data-fx="eclipse"] .bci__fx i:nth-child(4) { left: calc(var(--ex) + var(--er) * .71 - var(--er) * .45); top: calc(var(--ey) - var(--er) * .71 - var(--er) * .45); width: calc(var(--er) * .9); height: calc(var(--er) * .9); background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .9) 18%, rgba(255, 230, 190, .3) 45%, transparent 70%); opacity: 0; animation: fxDiamond 1.8s ease-out 1.2s both; }
@keyframes fxDiamond { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.8); } 100% { opacity: 0; transform: scale(.6); } }
.bci[data-fx="eclipse"] .bci__glow { display: none; }

/* reduced motion: every scene shows its finished state, no movement */
@media (prefers-reduced-motion: reduce) {
  .bci .bci__svg { opacity: 1 !important; clip-path: none !important; animation: none !important; filter: none !important; transform: none !important; }
  .bci__fx::before, .bci__fx::after, .bci__fx i, .bci__logo::after, .bci__logo::before, .bci__laser { animation: none !important; }
  .bci[data-fx="eclipse"] .bci__fx i:nth-child(4) { display: none; }
  .bci__laser { display: none !important; }
  .bcn, .bcn > * { animation: none !important; transition: none !important; }
  .bci.is-real .bcn, .bci.is-real .bcn-bloom, .bci.is-real .bcn-rays, .bci.is-real .bcn-mist, .bci.is-real .bcn-flare { opacity: 1; }
  .bcn-photo { filter: none; }
  .bcn-ch { opacity: 1 !important; animation: none !important; }
  .bci[data-fx="sun"] .bci__lead::after { width: min(440px, 72%); animation: none !important; }
  .bci[data-fx="sun"] .bci__logo::after { opacity: 1; animation: none !important; }
}