/* ==========================================================================
   VALKYRIE — drop pages, unreleased slots, 3-in-1 ice maker simulator
   ========================================================================== */

/* ------------------------------------------------------------------ drop links + drop pages */
.section__title a { transition: color .3s; }
.section__title a:hover { color: var(--accent); }
.drop-group__aside { display: grid; gap: 14px; justify-items: start; }
@media (min-width: 900px) { .drop-group__aside { justify-items: end; } }
.p-drop { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color .2s, color .2s; }
.p-drop:hover { border-color: var(--accent); color: var(--accent); }
.p-drop svg { width: 12px; height: 12px; }
.vcard__name a:hover { color: var(--accent); }
.vcard__open { position: relative; border-color: rgba(230,228,223,.3); color: var(--paper); }
.vcard__open::before { background: var(--paper); }
.vcard__open:hover { color: var(--ink); }

.drop-head { padding-bottom: clamp(40px, 6vw, 72px); }
.drop-head__title { font-family: var(--f-en); font-weight: 800; letter-spacing: -.02em; font-size: clamp(42px, 8vw, 120px); line-height: .95; text-align: start; }
[dir="rtl"] .drop-head__title { text-align: right; }
.drop-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.drop-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mute); transition: all .2s; }
.drop-nav a:hover { color: var(--fg); border-color: var(--fg); }
.drop-nav a[aria-current] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.drop-nav .lock { width: 12px; height: 12px; }

/* Unreleased slot card */
.card--slot { cursor: default; }
.card--slot .slot__visual { position: relative; overflow: hidden; display: grid; place-items: center; color: var(--paper); background:
	repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
	radial-gradient(circle at 70% 10%, #1f1f1d 0, #0e0e0d 65%); }
.slot__num { font-size: clamp(90px, 12vw, 150px); line-height: 1; color: #1f1f1d; -webkit-text-stroke: 1px rgba(230,228,223,.16); }
.card--later .slot__num { -webkit-text-stroke-color: rgba(255,90,31,.35); }
.slot__lock { position: absolute; width: 22px; height: 22px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.card--slot .card__title { display: grid; gap: 8px; padding-block: 6px; }
.card--slot .card__title .vbar { height: 16px; background: var(--fg); opacity: .85; }
.card--slot .card__cta { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.card--slot .card__cta:hover { color: var(--accent); }

/* ------------------------------------------------------------------ ice maker simulator */
.icesim { position: relative; direction: ltr; width: min(100%, 340px); aspect-ratio: 340 / 400; color: var(--paper); }
.icesim__lid { position: absolute; inset: 0 3% auto; height: 15%; background: linear-gradient(#43433e, #232321); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); border-radius: 10px 10px 0 0; display: grid; place-items: center; }
.icesim__lcd { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-width: 60%; padding: 6px 14px; border-radius: 8px; background: #050505; font-size: 10px; color: var(--volt); letter-spacing: .08em; }
.icesim__lcd b { font-weight: 500; opacity: .5; }
.is-on .icesim__lcd b { opacity: 1; animation: blink 1.4s steps(2, jump-none) infinite; }
.icesim__alert { position: absolute; right: 8%; top: -30px; z-index: 3; font: 700 10px var(--f-mono); letter-spacing: .08em; color: var(--ink); background: var(--accent); padding: 3px 8px; border-radius: 4px; font-style: normal; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.is-alert .icesim__alert { opacity: 1; transform: none; }
.is-beep .icesim__alert { animation: vk-beep .5s ease-in-out 3; }
@keyframes vk-beep { 50% { transform: scale(1.14); } }
.icesim__front { position: absolute; inset: 15% 0 0; display: grid; grid-template-columns: 1fr 24%; gap: 5%; padding: 7% 6% 30%; background: linear-gradient(90deg, #1a1a19, #34342f 40%, #3d3d38 62%, #151514); border: 1px solid #4b4b46; border-radius: 0 0 16px 16px; }
.icesim__front::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 7%; height: 14%; background: repeating-linear-gradient(90deg, #101010 0 6px, transparent 6px 14px); border-radius: 4px; }
.icesim__window { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid #55554f; background: linear-gradient(135deg, rgba(11,15,17,.95), rgba(22,32,42,.8) 55%, rgba(11,11,11,.95)); }
.icesim__chute { position: absolute; top: 0; left: 30%; right: 30%; height: 10px; background: #0b0b0b; border-radius: 0 0 6px 6px; transition: box-shadow .4s; }
.is-on .icesim__chute { box-shadow: 0 6px 18px rgba(159,214,240,.4); }
.icesim__basket { position: absolute; left: 6%; right: 6%; bottom: 5%; height: 72%; border-bottom: 2px solid rgba(230,228,223,.25); border-left: 1px dashed rgba(230,228,223,.12); border-right: 1px dashed rgba(230,228,223,.12); }
.ice { position: absolute; display: block; transform: rotate(var(--r)); background: linear-gradient(135deg, #f4fbff, #bfe3f5 60%, #7fb6d1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.ice--s { width: 12%; aspect-ratio: 1.2; border-radius: 3px 3px 60% 60% / 3px 3px 90% 90%; }
.ice--l { width: 16%; aspect-ratio: 1.2; border-radius: 4px 4px 60% 60% / 4px 4px 90% 90%; }
.ice--crushed { width: 7%; aspect-ratio: 1; border-radius: 2px; clip-path: polygon(10% 0, 100% 20%, 80% 100%, 0 70%); }
.icesim__disp { position: relative; border-radius: 10px; background: #1b1b1a; border: 1px solid #3b3b38; }
.icesim__nozzle { position: absolute; top: 12%; left: 50%; width: 36%; height: 10%; transform: translateX(-50%); background: #c9c6bf; border-radius: 3px 3px 8px 8px; }
.icesim__stream { position: absolute; top: 22%; left: 50%; width: 4px; height: 0; transform: translateX(-50%); background: linear-gradient(#9fd6f0, rgba(159,214,240,.4)); border-radius: 2px; transition: height .35s ease; }
.is-pouring .icesim__stream { height: 44%; }
.icesim__cup { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 62%; height: 26%; display: flex; align-items: flex-end; overflow: hidden; border: 1px solid rgba(230,228,223,.35); border-top: 0; border-radius: 0 0 6px 6px; }
.icesim__cup i { display: block; width: 100%; height: 0; background: rgba(159,214,240,.55); transition: height .8s ease; }
.icesim__tank { position: absolute; right: -10%; bottom: 16%; width: 7%; height: 48%; overflow: hidden; background: #0b0b0b; border: 1px solid #55554f; border-radius: 6px; }
.icesim__tank .mono { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); font-size: 7px; letter-spacing: 0; color: var(--accent); z-index: 2; }
.icesim__max { position: absolute; left: 0; right: 0; bottom: 90%; border-top: 1px dashed var(--accent); z-index: 2; }
.icesim__level { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#9fd6f0, #3f8fb4); transition: height .9s var(--ease); }
.icesim__hose { position: absolute; right: -24%; bottom: 10%; width: 14%; height: 6px; border-radius: 3px; background: #1d1d1c; opacity: .25; transition: opacity .3s; }
.is-hose .icesim__hose { opacity: 1; background: linear-gradient(90deg, #3f8fb4, #1d1d1c); }
.is-hose .icesim__level { animation: vk-tide 2s ease-in-out infinite; }
@keyframes vk-tide { 50% { filter: brightness(1.25); } }
.icesim__fill { margin-top: 10px; }
.is-hose .icesim__fill { display: none; }
.icesim__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.icesim__actions .btn { flex: 1 1 auto; }
.sim--ice [data-crushed][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
@media (max-width: 640px) {
	.icesim { width: min(72%, 260px); }
	.icesim__actions .btn { min-height: 44px; padding: 0 14px; font-size: 14px; }
}