/* Rondiqo – aftelling en START-moment op schermen. Huisstijl: ink #0C0B14, violet #7B5CFF, coral #FF6B4A. */
@import url("/css/brand.css");

/* ================= Aftelling ================= */
.cd-ov { position: fixed; inset: 0; z-index: 99998; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; overflow: hidden; color: #F4F2FA;
  font-family: "Sora", system-ui, sans-serif; padding: 5vh 4vw; animation: cd-in .35s ease-out both; --glow: 123, 92, 255; }
.cd-ov.final { --glow: 255, 107, 74; }
.cd-bg { position: absolute; inset: 0; background: radial-gradient(60vmax 60vmax at 50% 52%, rgba(var(--glow), .22), transparent 60%), radial-gradient(120vmax 80vmax at 50% 120%, rgba(123,92,255,.10), transparent 60%), #08070F; transition: background .6s; }
.cd-floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; background-image: linear-gradient(rgba(150,130,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(150,130,255,.10) 1px, transparent 1px); background-size: 64px 64px;
  transform: perspective(600px) rotateX(64deg); transform-origin: center top; mask-image: linear-gradient(to bottom, transparent, #000 35%, transparent); animation: cd-floor 1s linear infinite; }
.cd-pulse { position: absolute; inset: 0; background: radial-gradient(50vmax 50vmax at 50% 52%, rgba(var(--glow), .35), transparent 65%); opacity: 0; pointer-events: none; }
.cd-pulse.go { animation: cd-pulse .9s ease-out; }
.cd-head, .cd-dial, .cd-foot { position: relative; }
.cd-head { display: flex; flex-direction: column; align-items: center; gap: 1.2vh; }
.cd-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: min(1.9vw, 2.6vh); letter-spacing: .5em; text-indent: .5em; color: rgba(var(--glow), 1); }
.cd-groups { font-size: min(3.4vw, 4.4vh); font-weight: 700; letter-spacing: -.01em; text-align: center; }
.cd-dial { width: min(72vw, 62vh); aspect-ratio: 1; display: grid; place-items: center; }
.cd-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cd-dial .tk { stroke: rgba(244,242,250,.14); stroke-width: 1.4; stroke-linecap: round; transition: stroke .25s; }
.cd-dial .tk.long { stroke-width: 2.4; }
.cd-dial .tk.on { stroke: #F4F2FA; }
.cd-ov.final .cd-dial .tk.on { stroke: #FF6B4A; filter: drop-shadow(0 0 2px rgba(255,107,74,.9)); }
.cd-arc-track { fill: none; stroke: rgba(244,242,250,.08); stroke-width: 1; }
.cd-arc { fill: none; stroke: rgba(var(--glow), 1); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1000; transform: rotate(-90deg); transform-origin: 100px 100px; filter: drop-shadow(0 0 3px rgba(var(--glow), .9)); }
.cd-num { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.cd-num > span { grid-area: 1 / 1; font-size: min(30vw, 27vh); font-weight: 800; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.cd-num .cur { animation: cd-num-in .55s cubic-bezier(.16,1,.3,1) both; text-shadow: 0 0 .25em rgba(var(--glow), .35); }
.cd-num .old { animation: cd-num-out .5s ease-in both; }
.cd-ov.final .cd-num .cur { color: #FF6B4A; text-shadow: 0 0 .2em rgba(255,107,74,.65), 0 0 .6em rgba(255,107,74,.35); }
.cd-unit { position: absolute; bottom: 24%; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: min(1.4vw, 1.9vh); letter-spacing: .5em; text-indent: .5em; color: rgba(244,242,250,.45); }
.cd-foot { display: flex; align-items: center; gap: 1vw; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: min(1.2vw, 1.7vh); letter-spacing: .4em; color: rgba(244,242,250,.4); }
.cd-mark { width: min(3vw, 4.2vh); height: min(3vw, 4.2vh); }
.cd-ov.zero { animation: cd-zero .12s ease-in forwards; }
.cd-ov.aborted { --glow: 255, 59, 48; }
.cd-ov.aborted .cd-dial .tk.on { stroke: rgba(244,242,250,.14); }
.cd-msg { font-size: min(8vw, 8vh) !important; letter-spacing: .04em !important; color: #F4F2FA; }
.cd-abort { position: absolute; right: 3vw; bottom: 4vh; font: 800 clamp(1rem, 2vw, 1.4rem) "Sora", system-ui, sans-serif; letter-spacing: .12em; color: #fff; background: rgba(255,59,48,.92); border: 1px solid rgba(255,255,255,.5); border-radius: 12px; padding: .7em 1.4em; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.cd-abort:disabled { opacity: .5; }
@keyframes cd-in { from { opacity: 0; } }
@keyframes cd-floor { to { background-position: 0 64px, 0 0; } }
@keyframes cd-pulse { 0% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes cd-num-in { from { opacity: 0; transform: scale(1.35); filter: blur(18px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes cd-num-out { to { opacity: 0; transform: scale(.7); filter: blur(12px); } }
@keyframes cd-zero { to { opacity: 0; transform: scale(1.04); } }

/* ================= START-moment ================= */
.st-ov { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; overflow: hidden; pointer-events: none; color: #F4F2FA; font-family: "Sora", system-ui, sans-serif;
  animation: st-out .7s cubic-bezier(.7,0,.84,0) forwards calc(var(--dur, 5500ms) - 700ms); }
.st-bg { position: absolute; inset: 0; background: radial-gradient(70vmax 45vmax at 50% 50%, rgba(123,92,255,.28), transparent 60%), radial-gradient(40vmax 30vmax at 50% 50%, rgba(255,107,74,.22), transparent 60%), #07060D; }
.st-grid { position: absolute; inset: -20%; background-image: linear-gradient(rgba(150,130,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(150,130,255,.08) 1px, transparent 1px); background-size: 6vmin 6vmin; mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 65%); animation: st-grid 5s ease-out both; }
.st-flash { position: absolute; inset: 0; background: #fff; animation: st-flash .45s ease-out forwards; }
/* Laserlijn: de "finishlijn" die over het scherm schiet */
.st-beam { position: absolute; left: 0; right: 0; top: 50%; height: .5vmin; margin-top: -.25vmin; background: linear-gradient(90deg, transparent, #7B5CFF 20%, #fff 50%, #FF6B4A 80%, transparent);
  box-shadow: 0 0 2vmin #fff, 0 0 6vmin rgba(255,107,74,.8), 0 0 12vmin rgba(123,92,255,.7); transform: scaleX(0); animation: st-beam 1.3s cubic-bezier(.16,1,.3,1) .05s forwards; }
.st-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.st-rings i { grid-area: 1 / 1; width: 20vmin; height: 20vmin; border-radius: 50%; border: .35vmin solid rgba(244,242,250,.9); opacity: 0; animation: st-ring 1.6s cubic-bezier(.1,.7,.2,1) forwards; }
.st-rings i:nth-child(2) { border-color: #FF6B4A; animation-delay: .12s; }
.st-rings i:nth-child(3) { border-color: #7B5CFF; animation-delay: .24s; }
.st-streaks { position: absolute; inset: 0; }
.st-streaks i { position: absolute; left: 50%; top: 50%; width: var(--l); height: .25vmin; background: linear-gradient(90deg, transparent, var(--c)); transform-origin: 0 50%; transform: rotate(var(--a)) translateX(4vmin) scaleX(0); opacity: 0; border-radius: 2px;
  animation: st-streak 1.1s cubic-bezier(.16,1,.3,1) calc(.08s + var(--d)) forwards; }
.st-core { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.st-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: min(1.8vw, 2.4vh); letter-spacing: .6em; text-indent: .6em; color: #FF6B4A; opacity: 0; animation: st-up .6s ease-out .55s forwards; }
.st-word { position: relative; display: grid; margin: 1.5vh 0 2vh; font-size: min(24vw, 34vh); font-weight: 800; line-height: .9; letter-spacing: .02em; }
.st-word span { grid-area: 1 / 1; }
.st-word .w { position: relative; z-index: 2; color: #F4F2FA; text-shadow: 0 0 .06em rgba(255,255,255,.45), 0 0 .3em rgba(123,92,255,.35);
  animation: st-reveal .75s cubic-bezier(.16,1,.3,1) .12s both, st-breathe 2.4s ease-in-out 1s infinite alternate; }
/* Kleurscheiding (violet/coral) die naar het midden scherp trekt */
.st-word .c1, .st-word .c2 { opacity: .85; animation: st-reveal .75s cubic-bezier(.16,1,.3,1) .12s both; }
.st-word .c1 { color: #7B5CFF; animation: st-reveal .75s cubic-bezier(.16,1,.3,1) .12s both, st-split-l 1s cubic-bezier(.16,1,.3,1) .12s both; }
.st-word .c2 { color: #FF6B4A; animation: st-reveal .75s cubic-bezier(.16,1,.3,1) .12s both, st-split-r 1s cubic-bezier(.16,1,.3,1) .12s both; }
.st-meta { display: flex; gap: 2.4vw; align-items: baseline; flex-wrap: wrap; justify-content: center; opacity: 0; animation: st-up .6s ease-out .75s forwards; }
.st-groups { font-size: min(3.2vw, 4.4vh); font-weight: 700; }
.st-tod { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: min(2.6vw, 3.6vh); color: rgba(244,242,250,.7); }
.st-clock { margin-top: 3vh; display: flex; flex-direction: column; align-items: center; gap: .6vh; padding: 1.4vh 2.6vw; border: 1px solid rgba(150,130,255,.35); border-radius: 1.4vmin; background: rgba(12,11,20,.55); backdrop-filter: blur(6px); opacity: 0; animation: st-up .6s ease-out .95s forwards; }
.st-clock-l { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: min(1.2vw, 1.7vh); letter-spacing: .45em; text-indent: .45em; color: rgba(244,242,250,.55); }
.st-clock-v { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: min(4.6vw, 6.4vh); color: #FF6B4A; font-variant-numeric: tabular-nums; text-shadow: 0 0 .4em rgba(255,107,74,.45); }
.st-mark { position: absolute; bottom: 4vh; width: min(4.5vw, 6vh); height: min(4.5vw, 6vh); opacity: 0; animation: st-up .6s ease-out 1.2s forwards; }
@keyframes st-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes st-beam { 0% { transform: scaleX(0); opacity: 1; } 35% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) scaleY(.2); opacity: 0; } }
@keyframes st-ring { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(7); } }
@keyframes st-streak { 0% { opacity: 0; transform: rotate(var(--a)) translateX(4vmin) scaleX(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(70vmax) scaleX(1); } }
/* Ruime marge (−40%) zodat de gloed niet in een rechthoek wordt afgesneden. */
@keyframes st-reveal { from { clip-path: inset(-40% 50% -40% 50%); letter-spacing: .5em; transform: scale(1.18); } to { clip-path: inset(-40% -20% -40% -20%); letter-spacing: .02em; transform: none; } }
@keyframes st-split-l { from { transform: translate(-.09em, .01em); } to { transform: translate(0, 0); opacity: 0; } }
@keyframes st-split-r { from { transform: translate(.09em, -.01em); } to { transform: translate(0, 0); opacity: 0; } }
@keyframes st-breathe { to { text-shadow: 0 0 .1em rgba(255,255,255,.6), 0 0 .45em rgba(255,107,74,.35); } }
@keyframes st-up { from { opacity: 0; transform: translateY(2vh); } to { opacity: 1; transform: none; } }
@keyframes st-grid { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes st-out { 0% { opacity: 1; } 60% { opacity: 1; transform: scaleY(.02); filter: brightness(2); } 100% { opacity: 0; transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  .st-streaks, .st-rings, .cd-floor { display: none; }
  .st-word .w, .st-word .c1, .st-word .c2, .cd-num .cur, .cd-num .old { animation: none !important; }
  .st-word .c1, .st-word .c2 { display: none; }
}

/* ================= Startknop (beheer) ================= */
.startpad { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 10px 0; }
.startbtn { position: relative; width: min(64vw, 300px); height: min(64vw, 300px); border-radius: 50%; border: none; background: radial-gradient(circle at 35% 30%, #4ade80, #15803d 70%); color: #fff;
  font-size: clamp(2.4rem, 9vw, 4rem); font-weight: 900; letter-spacing: .04em; box-shadow: 0 10px 0 #0f5f2c, 0 20px 40px rgba(0,0,0,.35); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.startbtn:disabled { background: radial-gradient(circle at 35% 30%, #94a3b8, #475569 70%); box-shadow: 0 10px 0 #334155; cursor: not-allowed; }
.startbtn.holding { transform: translateY(6px); box-shadow: 0 4px 0 #0f5f2c, 0 10px 20px rgba(0,0,0,.35); }
.startbtn .fill { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(255,255,255,.45) var(--p, 0%), transparent 0); pointer-events: none; }
.startbtn .lbl { position: relative; display: block; line-height: 1; }
.startbtn .lbl small { display: block; font-size: .28em; font-weight: 700; letter-spacing: 0; margin-top: .4em; opacity: .9; }