/* ── SACK QUEST ── */
.sack-quest-page { --sack-bg: #0d0917; --sack-deep: #161026; --sack-purple: #a68cff; --sack-lilac: #d8c8ff; --sack-gold: #e8bd76; --sack-fog: #928aa8; background: var(--sack-bg); color: #eeeaff; font-family: "Inter", sans-serif; }
.sack-quest-page::before { display: none; }
.sack-quest { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(ellipse 75% 38% at 50% 9%, rgba(105,75,172,.2), transparent 72%), radial-gradient(ellipse 60% 30% at 50% 75%, rgba(51,35,96,.19), transparent 70%); }
.sack-quest::after { position: absolute; content: ""; inset: 0; pointer-events: none; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.sack-header, .sack-hero, .sack-oracle, .sack-revelation, .sack-ritual, .sack-final, .sack-footer { position: relative; z-index: 1; width: min(1080px, calc(100% - 3rem)); margin-inline: auto; }
.sack-header { height: 88px; display: flex; align-items: center; border-bottom: 1px solid rgba(216,200,255,.13); }.sack-sigil { display: flex; align-items: center; gap: .55rem; color: var(--sack-lilac); text-decoration: none; }.sack-sigil span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(166,140,255,.55); border-radius: 50%; color: var(--sack-gold); font-size: .9rem; }.sack-sigil small { font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .22em; }.sack-header-status { display: flex; align-items: center; gap: .55rem; margin-left: auto; color: #777087; font-family: "JetBrains Mono", monospace; font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; }.sack-header-status span { width: 6px; height: 6px; border-radius: 50%; background: #b893ed; box-shadow: 0 0 10px #b893ed; animation: sack-blink 2.8s ease infinite; }@keyframes sack-blink { 50% { opacity: .25; } }
.sack-hero { min-height: 660px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; }.sack-kicker, .sack-section-label { color: var(--sack-gold); font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; }.sack-hero h1 { margin: 1.35rem 0 1.7rem; font-size: clamp(2.9rem, 6vw, 5.7rem); letter-spacing: -.085em; line-height: .94; }.sack-hero h1 em, .sack-oracle h2 em, .sack-revelation h2 em, .sack-ritual h2 em, .sack-final h2 em { color: var(--sack-lilac); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.06em; }.sack-intro { max-width: 465px; color: #b1a9c2; font-size: .98rem; line-height: 1.75; }.sack-intro--quiet { color: #71697e; font-size: .78rem; margin-top: .7rem; }.sack-scroll-cue { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2.5rem; color: var(--sack-lilac); font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }.sack-scroll-cue span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(216,200,255,.35); border-radius: 50%; font-size: 1rem; animation: sack-float 2.5s ease-in-out infinite; }@keyframes sack-float { 50% { transform: translateY(4px); } }
.sack-hero-symbol { position: relative; height: 430px; display: grid; place-items: center; }.sack-hero-symbol::before { content: ""; position: absolute; width: 280px; height: 280px; border: 1px solid rgba(166,140,255,.16); border-radius: 50%; box-shadow: 0 0 100px rgba(122,84,210,.16); }.sack-hero-symbol::after { content: "✦"; position: absolute; color: var(--sack-lilac); font-size: 4.5rem; font-family: Georgia, serif; text-shadow: 0 0 40px #ac87ff; animation: sack-symbol-pulse 4s ease-in-out infinite; }@keyframes sack-symbol-pulse { 50% { transform: scale(1.08); opacity: .55; text-shadow: 0 0 80px #ac87ff; } }
.sack-constellation { position: absolute; width: 330px; height: 330px; border: 1px dashed rgba(166,140,255,.22); border-radius: 50%; transform: rotate(25deg); }.sack-constellation i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--sack-gold); box-shadow: 0 0 9px var(--sack-gold); }.sack-constellation i:nth-child(1) { left: 18%; top: 30%; }.sack-constellation i:nth-child(2) { right: 17%; top: 22%; }.sack-constellation i:nth-child(3) { right: 23%; bottom: 24%; }.sack-constellation i:nth-child(4) { left: 19%; bottom: 17%; }.sack-constellation i:nth-child(5) { left: 49%; top: 8%; }.sack-constellation b { position: absolute; inset: 17% 20%; border: 1px solid rgba(232,189,118,.18); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sack-cloud { position: absolute; width: 170px; height: 50px; border-radius: 50%; background: rgba(138,116,182,.12); filter: blur(19px); }.cloud-one { left: 0; bottom: 12%; }.cloud-two { right: -5%; top: 15%; width: 125px; }
.sack-oracle, .sack-revelation, .sack-ritual, .sack-final { padding: 7rem 0; text-align: center; }.sack-oracle { border-top: 1px solid rgba(216,200,255,.1); }.sack-oracle h2, .sack-revelation h2, .sack-ritual h2, .sack-final h2 { margin: 1rem 0 1.15rem; font-size: clamp(2.4rem, 5vw, 4.5rem); letter-spacing: -.075em; line-height: .95; }.sack-section-lede { max-width: 430px; margin: 0 auto; color: var(--sack-fog); font-size: .83rem; line-height: 1.7; }
.sack-oracle-display { position: relative; width: min(700px, 100%); height: 470px; margin: 1.4rem auto 0; isolation: isolate; }.sack-oracle-display::before, .sack-oracle-display::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(26px); }.sack-oracle-display::before { width: 520px; height: 230px; left: calc(50% - 260px); top: 92px; background: radial-gradient(ellipse at 28% 52%, rgba(195,201,211,.2), transparent 38%), radial-gradient(ellipse at 70% 44%, rgba(112,120,137,.2), transparent 42%), radial-gradient(ellipse at 50% 65%, rgba(42,48,63,.62), transparent 70%); opacity: .9; animation: sack-smoke-drift 11s ease-in-out infinite alternate; }.sack-oracle-display::after { width: 420px; height: 170px; left: calc(50% - 210px); top: 122px; background: radial-gradient(ellipse at 35% 48%, rgba(225,229,232,.12), transparent 32%), radial-gradient(ellipse at 68% 56%, rgba(86,92,106,.28), transparent 45%); opacity: .72; transform: rotate(-8deg); animation: sack-smoke-drift 8s ease-in-out -3s infinite alternate-reverse; }@keyframes sack-smoke-drift { from { transform: translate3d(-18px, 5px, 0) rotate(-3deg) scale(.96); } to { transform: translate3d(20px, -8px, 0) rotate(4deg) scale(1.08); } }.sack-crystal { position: absolute; z-index: 2; left: 50%; top: 0; display: block; width: 330px; height: 410px; margin: 0; border: 0; background: none; cursor: pointer; color: inherit; transform: translateX(-50%); }.sack-crystal-halo { position: absolute; width: 370px; height: 245px; top: 65px; left: -20px; border-radius: 50%; background: radial-gradient(ellipse at 25% 50%, rgba(184,143,255,.2), transparent 34%), radial-gradient(ellipse at 72% 42%, rgba(99,66,165,.28), transparent 42%), radial-gradient(ellipse, rgba(37,21,66,.7), transparent 70%); filter: blur(26px); opacity: .95; transition: transform 1.3s, opacity 1.3s; animation: sack-smoke-drift 9s ease-in-out -2s infinite alternate-reverse; }.sack-crystal-glow { position: absolute; width: 242px; height: 242px; top: 52px; left: 44px; border-radius: 50%; background: radial-gradient(circle at 31% 20%, rgba(255,255,255,.28), transparent 8%, rgba(205,170,255,.2) 25%, rgba(96,55,157,.4) 49%, rgba(17,10,31,.82) 83%); box-shadow: inset -22px -24px 36px rgba(0,0,0,.48), 0 0 38px rgba(162,110,255,.28); filter: blur(5px); animation: sack-crystal-breathe 4s ease-in-out infinite; }.sack-crystal-orb { position: absolute; z-index: 2; display: grid; place-items: center; width: 210px; height: 210px; left: 60px; top: 68px; overflow: hidden; border: 1px solid rgba(225,200,255,.8); border-radius: 50%; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.22) 0%, rgba(224,194,255,.14) 12%, rgba(151,111,205,.08) 25%, transparent 38%), radial-gradient(circle at 42% 38%, #805eae 0%, #5f3d91 46%, #2a1649 100%); box-shadow: inset 14px 12px 30px rgba(255,255,255,.16), inset -10px -13px 28px rgba(0,0,0,.42), 0 0 0 1px rgba(183,139,255,.2), 0 16px 34px rgba(0,0,0,.45), 0 0 32px rgba(145,91,235,.24); backdrop-filter: blur(2px); transition: transform 1.1s, box-shadow 1.1s; }.sack-crystal-orb::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; background: linear-gradient(125deg, rgba(255,255,255,.08), transparent 23%, transparent 72%, rgba(40,20,70,.1)); pointer-events: none; }.sack-crystal-orb::after { content: ""; position: absolute; width: 180px; height: 90px; left: 12px; bottom: 18px; border-radius: 50%; background: radial-gradient(ellipse at 30% 50%, rgba(45,22,75,.72), transparent 30%), radial-gradient(ellipse at 70% 48%, rgba(74,39,119,.78), transparent 48%); filter: blur(11px); opacity: .95; mix-blend-mode: multiply; animation: sack-mist-orbit 7s ease-in-out infinite; }.sack-crystal-orb .sack-crystal-top-mist { position: absolute; z-index: 1; width: 175px; height: 62px; left: 18px; top: 25px; border-radius: 50%; background: radial-gradient(ellipse at 28% 50%, rgba(42,20,72,.58), transparent 34%), radial-gradient(ellipse at 73% 48%, rgba(76,39,123,.72), transparent 52%); filter: blur(10px); opacity: .85; mix-blend-mode: multiply; animation: sack-top-mist 6.5s ease-in-out -2s infinite alternate; }@keyframes sack-top-mist { from { transform: translateX(24px) rotate(5deg) scaleX(.7); opacity: .45; } to { transform: translateX(-20px) rotate(-5deg) scaleX(1.1); opacity: .9; } }@keyframes sack-mist-orbit { 0%, 100% { opacity: .28; transform: translateX(-28px) rotate(-8deg) scaleX(.58) scaleY(.82); } 25% { opacity: .72; transform: translateX(-8px) rotate(-3deg) scaleX(1.05) scaleY(.7); } 50% { opacity: .9; transform: translateX(18px) rotate(4deg) scaleX(.62) scaleY(.9); } 75% { opacity: .58; transform: translateX(4px) rotate(1deg) scaleX(1.12) scaleY(.66); } }@keyframes sack-mist-orbit-reverse { 0%, 100% { opacity: .2; transform: translateX(24px) rotate(7deg) scaleX(.62) scaleY(.8); } 25% { opacity: .62; transform: translateX(2px) rotate(2deg) scaleX(1.08) scaleY(.64); } 50% { opacity: .78; transform: translateX(-20px) rotate(-5deg) scaleX(.56) scaleY(.9); } 75% { opacity: .48; transform: translateX(-2px) rotate(-1deg) scaleX(1.12) scaleY(.68); } }.sack-crystal-reflection { position: absolute; width: 38px; height: 13px; top: 27px; left: 43px; border-radius: 50%; background: rgba(255,255,255,.2); filter: blur(7px); opacity: .7; transform: rotate(-30deg); }.sack-crystal-cloud { position: absolute; z-index: 1; width: 155px; height: 52px; bottom: 31px; left: 27px; border-radius: 50%; background: radial-gradient(ellipse at 20% 50%, rgba(35,17,62,.68), transparent 30%), radial-gradient(ellipse at 75% 45%, rgba(67,32,111,.8), transparent 48%); filter: blur(12px); mix-blend-mode: multiply; animation: sack-mist-orbit-reverse 5.5s ease-in-out -1s infinite; }.sack-crystal-orb b { position: relative; z-index: 2; color: rgba(242,226,255,.9); font-family: Georgia, serif; font-size: 4.5rem; font-weight: 400; text-shadow: 0 0 20px rgba(210,164,255,.85); animation: sack-question 3.2s ease-in-out infinite; transition: opacity 1s ease, transform 1s ease; }.sack-crystal-question { display: block; }.sack-crystal-enlightenment { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; color: rgba(245,226,176,.95); font-family: Georgia, serif; font-size: 3.8rem; text-shadow: 0 0 24px rgba(239,191,97,.9); opacity: 0; transform: scale(.45) rotate(-20deg); transition: opacity 1.2s ease .35s, transform 1.2s cubic-bezier(.2,.8,.2,1) .35s; }.sack-oracle.is-revealed .sack-crystal-question { opacity: 0; transform: scale(.6); animation: none; visibility: hidden; }.sack-oracle.is-revealed .sack-crystal-enlightenment { opacity: 1; transform: scale(1) rotate(0); }.sack-crystal-base { position: absolute; z-index: 1; width: 158px; height: 43px; left: 86px; bottom: 87px; border-radius: 48% 48% 42% 42%; background: linear-gradient(180deg, #a86f45 0%, #754226 22%, #4b2719 67%, #29130e 100%); box-shadow: 0 16px 25px rgba(0,0,0,.58), inset 0 3px 4px rgba(255,211,156,.24), inset 0 -5px 8px rgba(24,9,4,.42); }.sack-crystal-base::before { content: ""; position: absolute; left: 11px; right: 11px; top: 5px; height: 22px; border-radius: 50%; border: 1px solid rgba(229,164,103,.45); background: radial-gradient(ellipse at 30% 35%, rgba(219,150,91,.25), transparent 30%), repeating-radial-gradient(ellipse at 50% 48%, transparent 0 8px, rgba(48,21,12,.22) 9px 10px); box-shadow: inset 0 2px 3px rgba(255,214,164,.2); }.sack-crystal-base::after { content: ""; position: absolute; left: 19px; right: 19px; bottom: 8px; height: 8px; border-radius: 50%; border-bottom: 2px solid rgba(207,125,72,.35); filter: blur(.3px); }.sack-crystal-prompt { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; color: #aaa0bd; font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .1em; line-height: 1.6; text-transform: uppercase; }.sack-crystal-prompt em { color: var(--sack-lilac); font-family: Georgia, serif; font-size: .9rem; letter-spacing: 0; text-transform: none; }@keyframes sack-crystal-breathe { 50% { transform: scale(1.04); opacity: .8; } }@keyframes sack-question { 50% { opacity: .28; transform: translateY(-3px); } }
.sack-fortune { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s .35s; }.sack-oracle.is-revealed .sack-fortune { opacity: 1; }.sack-fortune-line { position: absolute; display: flex; align-items: center; gap: .45rem; width: max-content; max-width: 220px; opacity: .1; color: #d8c9ec; text-align: left; text-shadow: 0 0 18px rgba(190,147,255,.8); }.sack-fortune-line span { color: var(--sack-gold); font-family: Georgia, serif; font-size: .9rem; }.sack-fortune-line strong { font-family: Georgia, serif; font-size: .92rem; font-weight: 400; line-height: 1.2; }.sack-fortune-line:nth-child(1) { --fortune-rotation: -4deg; --fortune-delay: 0s; top: 9%; left: 5%; transform: rotate(var(--fortune-rotation)); }.sack-fortune-line:nth-child(2) { --fortune-rotation: 4deg; --fortune-delay: 1.2s; top: 39%; right: 0; transform: rotate(var(--fortune-rotation)); }.sack-fortune-line:nth-child(3) { --fortune-rotation: 2deg; --fortune-delay: 2.4s; bottom: 29%; left: 7%; transform: rotate(var(--fortune-rotation)); }.sack-oracle.is-revealed .sack-fortune-line { animation: sack-fortune-reveal 1.4s ease var(--fortune-delay) both, sack-fortune-hover 3.8s ease-in-out calc(var(--fortune-delay) + 1.4s) infinite alternate; }@keyframes sack-fortune-reveal { from { opacity: 0; filter: blur(2px); transform: translateY(8px) rotate(var(--fortune-rotation)); } to { opacity: 1; filter: blur(0); transform: translateY(0) rotate(var(--fortune-rotation)); } }@keyframes sack-fortune-hover { from { opacity: 1; transform: translateY(0) rotate(var(--fortune-rotation)); } to { opacity: 1; transform: translateY(-8px) rotate(var(--fortune-rotation)); } }.sack-oracle.is-revealed .sack-crystal-orb { transform: scale(1.06); box-shadow: 0 0 45px rgba(215,222,223,.3), inset 14px 12px 30px rgba(255,255,255,.14), inset -23px -30px 38px rgba(0,0,0,.62); }.sack-oracle.is-revealed .sack-crystal-halo { transform: scale(1.3); opacity: .55; }
.sack-revelation { border-top: 1px solid rgba(216,200,255,.1); }.sack-revelation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.3rem; text-align: left; }.sack-revelation-grid article { position: relative; min-height: 255px; padding: 1.5rem; border: 1px solid rgba(216,200,255,.13); border-radius: 4px; background: linear-gradient(145deg, rgba(32,23,54,.75), rgba(13,9,23,.65)); }.sack-revelation-icon { display: block; margin-bottom: 2.2rem; color: var(--sack-gold); font-family: Georgia, serif; font-size: 1.7rem; }.sack-revelation-grid small { color: #776c89; font-family: "JetBrains Mono", monospace; font-size: .58rem; letter-spacing: .14em; }.sack-revelation-grid h3 { margin: .65rem 0 .7rem; color: var(--sack-lilac); font-size: .98rem; line-height: 1.25; }.sack-revelation-grid p { color: #91869f; font-size: .75rem; line-height: 1.7; }
.sack-ritual { border-top: 1px solid rgba(216,200,255,.1); }.sack-ritual-steps { display: flex; justify-content: center; gap: 2rem; margin-top: 3rem; }.sack-ritual-steps > div { width: 180px; }.sack-ritual-steps span { display: grid; place-items: center; width: 45px; height: 45px; margin: 0 auto 1rem; border: 1px solid rgba(232,189,118,.5); border-radius: 50%; color: var(--sack-gold); font-family: Georgia, serif; }.sack-ritual-steps p { color: #a49aac; font-size: .72rem; }
.sack-final { border-top: 1px solid rgba(216,200,255,.1); }.sack-final-rune { display: grid; place-items: center; width: 45px; height: 45px; margin: 0 auto 2rem; border: 1px solid rgba(232,189,118,.5); border-radius: 50%; color: var(--sack-gold); font-size: 1.2rem; }.sack-final p { color: #9d93aa; font-size: .84rem; }.sack-accept { display: inline-flex; align-items: center; gap: 2rem; margin-top: 2rem; padding: .95rem 1.35rem; border: 1px solid rgba(232,189,118,.65); color: #f4dfbc; background: rgba(232,189,118,.08); font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; transition: all .25s; }.sack-accept:hover { color: #160e23; background: var(--sack-gold); box-shadow: 0 0 35px rgba(232,189,118,.3); }.sack-accept b { font-size: 1.1rem; font-weight: 400; }.sack-disclaimer { display: block; margin-top: 2.5rem; color: #62586d; font-size: .62rem; line-height: 1.6; }.sack-footer { display: flex; align-items: center; gap: 2rem; padding: 2.2rem 0; border-top: 1px solid rgba(216,200,255,.1); color: #675d75; font-family: "JetBrains Mono", monospace; font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; }.sack-footer span:nth-child(2) { flex: 1; text-align: center; color: #51485e; }.sack-footer a { color: #8e7ea2; text-decoration: none; }.sack-footer a:hover { color: var(--sack-lilac); }
.sack-stars { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #e8d8ff; box-shadow: 40px 70px #e8d8ff, 120px 12px #a78de0, 215px 115px #e8d8ff, 330px 45px #947bbf, 470px 160px #e8d8ff, 630px 80px #a78de0, 790px 130px #e8d8ff, 930px 25px #947bbf, 1030px 190px #e8d8ff; opacity: .3; }.sack-stars--one { top: 150px; left: 8%; }.sack-stars--two { top: 700px; right: 8%; transform: scale(.7); opacity: .18; }.sack-mist { position: absolute; width: 500px; height: 150px; border-radius: 50%; background: rgba(140,118,179,.07); filter: blur(50px); animation: sack-mist 12s ease-in-out infinite alternate; }.sack-mist--one { top: 44%; left: -180px; }.sack-mist--two { top: 69%; right: -200px; animation-delay: -5s; }@keyframes sack-mist { to { transform: translateX(120px) scale(1.2); opacity: .5; } }
@media (max-width: 760px) { .sack-hero { grid-template-columns: 1fr; min-height: 0; padding: 6rem 0 5rem; }.sack-hero-symbol { height: 340px; margin-top: -1rem; }.sack-revelation-grid { grid-template-columns: 1fr; }.sack-revelation-grid article { min-height: 0; }.sack-ritual-steps { gap: .5rem; }.sack-ritual-steps > div { width: 32%; }.sack-footer { flex-wrap: wrap; }.sack-footer span:nth-child(2) { order: 3; flex-basis: 100%; text-align: left; } }
@media (max-width: 500px) { .sack-header, .sack-hero, .sack-oracle, .sack-revelation, .sack-ritual, .sack-final, .sack-footer { width: calc(100% - 2rem); }.sack-header { height: 70px; }.sack-header-status { font-size: .52rem; }.sack-hero h1 { font-size: clamp(2.5rem, 12vw, 4rem); }.sack-hero h1 em { display: inline-block; font-size: .84em; white-space: nowrap; }.sack-oracle-display { height: 380px; }.sack-fortune-line:nth-child(1) { top: 5%; }.sack-fortune-line:nth-child(2) { top: 21%; }.sack-fortune-line:nth-child(3) { bottom: 46%; }.sack-crystal { transform: translateX(-50%) scale(.88); transform-origin: top center; }.sack-oracle, .sack-revelation, .sack-ritual, .sack-final { padding: 5.5rem 0; }.sack-oracle { padding-bottom: 3.5rem; }.sack-ritual-steps { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }.sack-ritual-steps > div { display: flex; align-items: center; gap: 1rem; width: auto; text-align: left; }.sack-ritual-steps span { flex: 0 0 38px; width: 38px; height: 38px; margin: 0; }.sack-footer { align-items: flex-start; flex-direction: column; gap: 1rem; } }