/* Silverdale site motion (mockup). Loaded on every page after the page's own CSS. Pairs with motion.js. */

/* ---------- Page transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px) scale(.99); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
/* Shared elements glide between pages instead of fading. */
/* A name may appear only once per page, or the browser cancels the whole transition: the footer logo stays unnamed. */
.brand img { view-transition-name: studio-logo; }
.vt-ap-logo { view-transition-name: ap-logo; }
.vt-ap-icon { view-transition-name: ap-icon; }
.vt-dice-icon { view-transition-name: dice-icon; }
.vt-ap-art { view-transition-name: ap-art; }
.vt-dice-art { view-transition-name: dice-art; }
/* The top bar holds still while the page changes, and the active-tab highlight slides to the new tab. */
.topbar { view-transition-name: topbar; }
.nav-pill { view-transition-name: nav-pill; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
/* Fallback when View Transitions are missing (Firefox): fade out, fade in. */
html.motion body { animation: page-in .45s cubic-bezier(.22,1,.36,1) both; }
html.page-leave body { opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
@supports (view-transition-name: a) { html.motion body { animation: none; } }

/* ---------- Scroll reveal ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay: var(--delay, 0s); animation: reveal-failsafe 0s 4s forwards; }
.motion [data-reveal="left"] { transform: translateX(-40px); }
.motion [data-reveal="right"] { transform: translateX(40px); }
.motion [data-reveal="zoom"] { transform: scale(.92); }
.motion-js [data-reveal] { animation: none; }
.motion [data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

/* ---------- Open / close ---------- */
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.faq > summary::after, .rich-text-block details > summary::after { transition: transform .3s cubic-bezier(.22,1,.36,1); }
details.faq[open]:not(.closing) > summary::after { transform: rotate(45deg); }
details[open]:not(.closing) > :not(summary) { animation: details-in .4s .05s cubic-bezier(.22,1,.36,1) both; }
@keyframes details-in { from { opacity: 0; transform: translateY(-6px); } }

/* "Our games" menu: fade and drop instead of popping. */
.switcher-menu { display: block !important; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right;
  transition: opacity .22s, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s .3s; }
.switcher:hover .switcher-menu, .switcher:focus-within .switcher-menu, .switcher.open .switcher-menu {
  opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s; }
.switcher-menu a { transition: background .15s, transform .2s; }
.switcher-menu a:hover { transform: translateX(3px); }

/* ---------- Lightbox (grows out of the clicked image) ---------- */
img.zoomable { cursor: zoom-in; }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; overflow: hidden; color: #fff; outline: none; }
.lightbox::backdrop { background: rgba(14, 12, 10, .9); }
/* the blur is re-drawn on every frame of the fade: only where a desktop GPU can afford it */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lightbox::backdrop { background: rgba(14, 12, 10, .78); backdrop-filter: blur(8px); } }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 80px 54px; box-sizing: border-box; pointer-events: none; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); pointer-events: auto; cursor: zoom-out; will-change: transform; }
.lightbox figcaption { font: 700 17px/1.3 "Open Sans", system-ui, sans-serif; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.lightbox button { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; transition: background .2s, transform .2s; }
.lightbox button:hover { background: rgba(255,255,255,.24); transform: scale(1.08); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; margin-top: -24px; }
.lb-next { right: 18px; top: 50%; margin-top: -24px; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }
.lb-count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; margin: 0; font: 600 13px system-ui, sans-serif; opacity: .7; }
@media (max-width: 600px) { .lightbox figure { padding: 60px 14px 60px; } .lb-prev, .lb-next { top: auto; bottom: 10px; } }

/* ---------- Tilt cards ---------- */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .3s; will-change: transform; }
[data-tilt]:hover { transition: transform .12s linear, box-shadow .3s; }

/* ---------- Game tile grows into the game's site ---------- */
.expand-clone { position: fixed; z-index: 1000; margin: 0 !important; overflow: hidden; pointer-events: none; transform: none !important;
  translate: none !important; rotate: none !important; animation: none !important; box-shadow: 0 40px 120px rgba(0,0,0,.45); }
html.expanding * { view-transition-name: none !important; }
html.sd-arrive::after { content: ""; position: fixed; inset: 0; z-index: 10000; background: var(--arrive, #121110); pointer-events: none;
  animation: sd-uncover .45s cubic-bezier(.4,0,.2,1) both; }
@keyframes sd-uncover { to { opacity: 0; visibility: hidden; } }
html.sd-arrive body > :not(.lightbox):not(.mock-nav) { animation: sd-arrive-in .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes sd-arrive-in { from { transform: scale(1.025); } }
/* coming home: covered in the game's colour until the script shrinks it into the tile */
html.sd-return::after { content: ""; position: fixed; inset: 0; z-index: 999; background: var(--return, #121110); pointer-events: none; }
html.sd-return * { view-transition-name: none !important; }

/* ---------- Hover and press on everything you can click ---------- */
:where(a, button, summary, input, select, textarea):focus-visible { outline: 2.5px solid var(--accent, #7cc242); outline-offset: 3px; border-radius: 8px; }
.btn, .ap-btn, .switcher > button, .sd-pill { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background-color .2s, border-color .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn:active, .ap-btn:active, .switcher > button:active, .sd-pill:active { transform: translateY(1px) scale(.97); transition-duration: .08s; }
.btn.ghost:hover { box-shadow: none; background: color-mix(in srgb, var(--fg) 7%, transparent); }
.switcher > button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--fg) 28%, var(--line)); }
.badges a, .link-block-8, .link-block-10, .store-card { display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1), filter .3s; }
.badges a:hover, .link-block-8:hover, .link-block-10:hover { transform: translateY(-3px); filter: drop-shadow(0 10px 14px rgba(0,0,0,.28)); }
.badges a:active, .link-block-8:active, .link-block-10:active { transform: scale(.96); transition-duration: .08s; }
.nav a, .crumb, .doc aside a, .switcher-menu a { transition: color .2s, background-color .2s, transform .25s cubic-bezier(.22,1,.36,1); }
.doc aside a:hover { transform: translateX(4px); }
.brand img, .studio-mark img, .silverdalelogo img, .footer-logo-link img { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.brand:hover img, .studio-mark:hover img, .silverdalelogo:hover img, .footer-logo-link:hover img { transform: rotate(-4deg) scale(1.06); }
footer.site a:not(.studio-mark) { width: fit-content; text-decoration: none !important;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .35s cubic-bezier(.22,1,.36,1), opacity .2s; }
footer.site a:not(.studio-mark):hover { background-size: 100% 1px; }
.footer-link { transition: color .2s, transform .25s; } .footer-link:hover { transform: translateY(-1px); }
.social a, .sociallogos { transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.social a:hover, .sociallogos:hover { transform: translateY(-3px) scale(1.12); }
.feature { transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .4s; }
.feature:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 20px 44px rgba(0,0,0,.2); }
.feature .ico { display: inline-block; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.feature:hover .ico { transform: scale(1.2) rotate(-8deg); }
.presets span { transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .2s, background-color .2s; }
.presets span:hover { transform: translateY(-2px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.shots-grid img, .phone-pair img { transition: translate .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, scale .45s cubic-bezier(.22,1,.36,1); }
.shots-grid figure:hover img, .phone-pair img:hover { translate: 0 -8px; scale: 1.025; }
.browser-frame { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s; }
.browser-frame:hover { transform: translateY(-5px); box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.choice { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s !important; }
.choice:active { transform: translateY(-3px) scale(.985) !important; transition-duration: .12s !important; }
.choice .chip { transition: background-color .3s; }
.choice:hover .chip { background: color-mix(in srgb, currentColor 18%, transparent); }
details.faq > summary, .rich-text-block details > summary { transition: color .2s; }
details.faq > summary:hover { color: var(--accent); }
.t-ap details.faq > summary:hover { color: #3f8a1a; }
.rich-text-block details > summary:hover { color: #6f7f00; }
.form input, .form select, .form textarea, .ap-form input, .ap-form select, .ap-form textarea { transition: border-color .2s, box-shadow .25s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.ap-form input:focus, .ap-form select:focus, .ap-form textarea:focus { box-shadow: 0 0 0 4px rgba(193,211,0,.25); }
.mock-nav a { transition: color .15s, transform .2s; } .mock-nav a:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Cursor: the text I-beam only where text is meant to be read or typed ----------
   cursor is inherited, so everything defaults to the arrow; links and buttons pass the hand to everything inside them. */
html, body { cursor: default; }
p, li, td, th, dd, blockquote, pre, .rich-text-block { cursor: text; }
a[href], a[href] *, button, button *, summary, summary *, select, label, [role="tab"], [role="button"] { cursor: pointer; }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"]), textarea, [contenteditable] { cursor: text; }
img.zoomable { cursor: zoom-in !important; }
.lightbox img { cursor: zoom-out !important; }
.lightbox, .lightbox figcaption, .lb-count { cursor: default; }
/* tags, chips and dice: things you hover but don't read, so no accidental text selection either */
.presets span, .chip, .tag, .facts span, .diceset, .pk-fact, .pk-eyebrow, .pk-seg, .pk-tabs, .badges, .get-row, .feature .ico, .pk-feat .ico,
.browser-frame .bar, .btn, .ap-btn, .pk-btn, .pk-get, .pk-copy, .pk-dl, .switcher > button, .mock-nav { -webkit-user-select: none; user-select: none; }
.pk-eyebrow, .chip, .tag, .presets span, .facts span { cursor: default; } a[href] .chip, a[href] .tag { cursor: pointer; }

/* ---------- Round 6: audit fill-ins ---------- */
/* auto reveal (motion.js §4): `translate` composes with any transform the element already has */
.motion-js [data-auto-reveal] { opacity: 0; translate: 0 22px; transition: opacity .7s cubic-bezier(.22,1,.36,1), translate .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--delay, 0s); }
.motion-js [data-auto-reveal].is-in { opacity: 1; translate: 0 0; }

/* links inside running text: the underline lifts and thickens, colour eases */
:is(p, li, dd, td, .callout, .pk-note, .footer-legal, .credit, .legal, .updated) a[href]:not([class]) {
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color .2s, text-decoration-color .25s, text-underline-offset .25s cubic-bezier(.22,1,.36,1), text-decoration-thickness .25s;
}
:is(p, li, dd, td, .callout, .pk-note, .footer-legal, .credit, .legal, .updated) a[href]:not([class]):hover {
  text-decoration-color: currentColor; text-underline-offset: .32em; text-decoration-thickness: 2px;
}
/* Animal Park logo on the sub pages */
.logo-link .logo { transition: transform .45s cubic-bezier(.34,1.56,.64,1), filter .3s; }
.logo-link:hover .logo { transform: scale(1.04) rotate(-1.5deg); filter: drop-shadow(0 6px 10px rgba(31,41,11,.25)); }
.logo-link:active .logo { transform: scale(.98); transition-duration: .1s; }

/* contact forms */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form[data-form] { position: relative; }
form[data-form] :is(input, select, textarea) { transition: border-color .2s, box-shadow .25s, background-color .2s; }
form[data-form] :is(input, textarea):user-invalid { border-color: #d0574b; box-shadow: 0 0 0 3px rgba(208,87,75,.18); }
form[data-form] [type=submit] { position: relative; }
form[data-form] [type=submit].is-sending { color: transparent !important; pointer-events: none; }
form[data-form] [type=submit].is-sending::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: sd-spin .7s linear infinite;
}
.t-ap form[data-form] [type=submit].is-sending::after, .ap-form [type=submit].is-sending::after { border-color: rgba(31,41,11,.25); border-top-color: #1f290b; }
@keyframes sd-spin { to { transform: rotate(1turn); } }
.form-done { margin: 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, #8fbf3f 18%, transparent); border: 1px solid color-mix(in srgb, #8fbf3f 55%, transparent); }
.form-done.pop { animation: form-done-in .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes form-done-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
#sent:target { display: block; }                 /* no-JS: the worker redirects back to ...#sent */
.form-err { margin: 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, #d0574b 14%, transparent); border: 1px solid color-mix(in srgb, #d0574b 50%, transparent); }
.form-err.pop { animation: form-done-in .55s cubic-bezier(.34,1.56,.64,1) both; }
/* skip link: off screen until focused, then slides in */
.skip { position: fixed; left: 12px; top: 12px; z-index: 10000; padding: 10px 16px; border-radius: 10px; background: #111; color: #fff !important; font: 700 14px/1.2 system-ui, sans-serif; text-decoration: none; transform: translateY(-160%); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.skip:focus-visible { transform: none; outline: 3px solid #ffd23f; outline-offset: 2px; }
/* images carry their real width/height so space is reserved before they load; CSS still sets the size */
:where(img[width][height]) { height: auto; }