:root {
  --od-purple: #6f4a87;
  --od-purple-deep: #26182f;
  --od-gold: #e9c36b;
  --od-gold-soft: #f6e3aa;
  --od-ink: #201527;
  --od-cream: #fff8e9;
  --od-panel: rgba(251, 244, 228, .88);
  --od-border: rgba(239, 206, 128, .62);
  --od-shadow: 0 32px 90px rgba(4, 1, 12, .54);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--od-ink);
  background: #090710;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.od-login {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #2e1939 0, #0b0711 70%);
}

.od-particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.od-world {
  position: absolute;
  inset: -2.5%;
  z-index: 1;
  transform: translate3d(0, 0, 0) scale(1.04);
  transform-origin: 50% 52%;
  transition: transform 4.2s cubic-bezier(.18,.74,.12,1), filter 2s ease;
  will-change: transform;
}

.od-bg,
.od-atmosphere,
.od-foreground,
.od-vignette,
.od-portal-glow,
.od-seam-light {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.od-bg {
  background-size: cover;
  transition: opacity 2.1s cubic-bezier(.2,.65,.2,1), transform 5s ease;
}
.od-bg--closed { background-image: url('../images/bg-closed.webp'); opacity: 1; }
.od-bg--open { background-image: url('../images/bg-open.webp'); opacity: 0; transform: scale(1.015); }

.od-portal-glow {
  inset: 3% 22% 0;
  opacity: 0;
  background-image: url('../images/portal-tight.webp');
  background-size: contain;
  background-position: center 44%;
  mix-blend-mode: screen;
  filter: blur(1px) saturate(1.12);
  transform: scale(.76);
  transition: opacity 1.4s ease, transform 4s cubic-bezier(.2,.7,.12,1);
}

.od-seam-light {
  inset: 18% auto 18% 50%;
  width: 5px;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255,242,189,.45) 7%, #fffbe3 40%, #f6d478 75%, transparent);
  box-shadow: 0 0 14px #fff4bd, 0 0 42px #ffd76b, 0 0 90px rgba(255,193,54,.75);
  transform: translateX(-50%) scaleY(.3);
  transition: opacity .45s ease, transform 1.15s cubic-bezier(.2,.9,.2,1), width 1.2s ease;
}

.od-atmosphere--mist {
  background-image: url('../images/mist.webp');
  background-size: 100% 100%;
  opacity: .28;
  mix-blend-mode: screen;
  animation: mist-breathe 10s ease-in-out infinite alternate;
}
.od-atmosphere--sparkles {
  background-image: url('../images/particles-overlay.webp');
  background-size: 100% 100%;
  opacity: .16;
  mix-blend-mode: screen;
  animation: sparkle-drift 13s ease-in-out infinite alternate;
}

.od-foreground {
  inset: auto auto -4% -4%;
  width: min(48vw, 780px);
  height: min(50vw, 620px);
  background-image: url('../images/foreground-tight.webp');
  background-size: contain;
  background-position: left bottom;
  transform-origin: 18% 100%;
  filter: saturate(1.05) brightness(.88);
  opacity: .78;
  animation: flora-sway 8s ease-in-out infinite alternate;
}
.od-foreground--right {
  left: auto;
  right: -4%;
  transform: scaleX(-1);
  transform-origin: 82% 100%;
  animation-name: flora-sway-right;
  animation-delay: -3.4s;
}

.od-vignette {
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(4,2,10,.25), transparent 24%, transparent 68%, rgba(4,2,10,.4)),
    radial-gradient(circle at center, transparent 38%, rgba(7,3,15,.42) 100%);
}

.od-topbar {
  position: absolute;
  z-index: 15;
  top: max(18px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  display: flex;
  gap: 10px;
}
.od-icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,236,191,.27);
  border-radius: 999px;
  color: #fff4d4;
  background: rgba(20,11,28,.37);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: .25s ease;
}
.od-icon-btn:hover,
.od-icon-btn[aria-pressed="true"] {
  color: #241529;
  background: rgba(255,239,195,.9);
  box-shadow: 0 0 28px rgba(244,199,104,.32);
}

.od-panel-wrap {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 51%;
  width: min(420px, calc(100vw - 34px));
  transform: translate(-50%, -50%);
  transition: opacity .8s ease, transform 1.2s cubic-bezier(.2,.72,.2,1), filter .8s ease;
}

.od-emblem-wrap {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -88px;
  width: 180px;
  height: 138px;
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 20px rgba(22,11,4,.5));
  pointer-events: none;
}
.od-emblem {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: emblem-float 5s ease-in-out infinite;
}
.od-emblem-aura {
  position: absolute;
  inset: 24% 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,225,141,.7), rgba(199,120,35,.22) 42%, transparent 72%);
  filter: blur(16px);
  opacity: .65;
  animation: aura-pulse 3.8s ease-in-out infinite;
}

.od-panel {
  position: relative;
  overflow: hidden;
  padding: 58px 36px 28px;
  border: 1px solid var(--od-border);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,252,241,.94), rgba(244,233,216,.83)),
    var(--od-panel);
  box-shadow: var(--od-shadow), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(21px) saturate(1.1);
}
.od-panel::before,
.od-panel::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(147,102,53,.24);
  transform: rotate(45deg);
}
.od-panel::before { top: -60px; left: -60px; }
.od-panel::after { right: -60px; bottom: -60px; }
.od-panel-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.34) 42%, transparent 59%);
  transform: translateX(-130%);
  animation: panel-shine 8s ease-in-out infinite 2s;
}

.od-kicker {
  margin: 0 0 8px;
  color: #876348;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
  text-align: center;
}
.od-panel h1,
.od-paths h2 {
  margin: 0;
  color: #2d1b34;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.02;
  text-align: center;
}
.od-panel h1 { font-size: clamp(30px, 3.2vw, 43px); }
.od-intro {
  max-width: 300px;
  margin: 14px auto 24px;
  color: #725f66;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.od-form { position: relative; z-index: 2; }
.od-form > label {
  display: block;
  margin: 14px 0 7px;
  color: #4a394d;
  font-size: 12px;
  font-weight: 750;
}
.od-field { position: relative; }
.od-field input {
  width: 100%;
  height: 47px;
  padding: 0 44px 0 14px;
  border: 1px solid rgba(91,62,87,.19);
  border-radius: 12px;
  outline: 0;
  color: #2c2130;
  background: rgba(255,255,255,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.od-field input:focus {
  border-color: rgba(111,74,135,.7);
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 0 4px rgba(111,74,135,.09), 0 8px 22px rgba(48,25,58,.08);
}
.od-field > span,
.od-reveal {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9d7c4e;
}
.od-reveal {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.od-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 18px;
  color: #796b78;
  font-size: 11px;
}
.od-form-row a { color: #6e477e; text-decoration: none; }
.od-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.od-check input { accent-color: #6f4a87; }

.od-enter,
.od-guided,
.od-return {
  width: 100%;
  border-radius: 13px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.od-enter {
  position: relative;
  overflow: hidden;
  min-height: 60px;
  border: 1px solid rgba(255,224,148,.42);
  color: #fff9eb;
  background: linear-gradient(135deg, #392044 0%, #70498a 48%, #3a2147 100%);
  box-shadow: 0 11px 28px rgba(55,29,67,.28), inset 0 1px rgba(255,255,255,.2);
}
.od-enter::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -24%;
  width: 21%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation: button-glint 4.2s ease-in-out infinite 1.4s;
}
.od-enter span,
.od-enter small { display: block; position: relative; z-index: 2; }
.od-enter span { font-size: 12px; font-weight: 850; letter-spacing: .16em; }
.od-enter small { margin-top: 4px; color: rgba(255,247,222,.66); font-family: Georgia, serif; font-size: 10px; font-style: italic; }
.od-enter:hover { transform: translateY(-2px); box-shadow: 0 17px 36px rgba(55,29,67,.36), 0 0 34px rgba(232,190,93,.16); }
.od-enter:active { transform: translateY(0); }
.od-guided {
  margin-top: 10px;
  height: 43px;
  border: 1px solid rgba(91,62,87,.21);
  color: #60466a;
  background: rgba(255,255,255,.35);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
}
.od-guided:hover { background: rgba(255,255,255,.7); transform: translateY(-1px); }
.od-demo-note { margin: 15px 0 0; color: #9b8d91; font-size: 10px; text-align: center; }

.od-fairy {
  position: absolute;
  z-index: 3;
  left: 18%;
  top: 40%;
  width: 12px;
  height: 12px;
  opacity: 0;
  filter: drop-shadow(0 0 8px #ffe78f) drop-shadow(0 0 18px #e8bfff);
}
.od-fairy i,
.od-fairy b {
  position: absolute;
  top: 3px;
  width: 11px;
  height: 7px;
  border-radius: 75% 25% 75% 25%;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(220,180,255,.28));
  transform-origin: 100% 50%;
  animation: wing-left .14s ease-in-out infinite alternate;
}
.od-fairy i { right: 5px; }
.od-fairy b { left: 5px; transform-origin: 0 50%; animation-name: wing-right; }
.od-fairy::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff4a8;
  box-shadow: 0 0 11px 4px rgba(255,216,111,.95);
}

.od-transition-copy {
  position: absolute;
  z-index: 17;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
  color: #fff4ce;
  font-family: Georgia, serif;
  font-size: clamp(18px, 2.2vw, 30px);
  letter-spacing: .06em;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 0 25px rgba(246,198,93,.45);
  pointer-events: none;
  transition: opacity .8s ease, transform 1.1s ease;
}

.od-paths {
  position: absolute;
  z-index: 18;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 26px;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  transform: scale(.97);
  transition: opacity 1s ease, transform 1.2s ease, visibility 0s linear 1s;
}
.od-paths-heading { color: #fff2cf; text-align: center; text-shadow: 0 3px 22px rgba(0,0,0,.8); }
.od-paths-heading p { margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .3em; }
.od-paths h2 { color: #fff8e5; font-size: clamp(30px, 4vw, 52px); }
.od-path-grid { display: grid; grid-template-columns: repeat(2, minmax(230px, 330px)); gap: 22px; }
.od-path-card {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  padding: 34px 28px;
  border: 1px solid rgba(245,211,133,.45);
  border-radius: 26px;
  color: #fff4dd;
  background:
    linear-gradient(180deg, rgba(13,7,20,.18), rgba(15,8,22,.88)),
    radial-gradient(circle at 50% 14%, rgba(203,151,255,.48), transparent 36%),
    linear-gradient(145deg, #59355f, #21152c);
  box-shadow: 0 25px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transform: translateY(22px);
  transition: .42s cubic-bezier(.2,.72,.2,1);
}
.od-path-card--boticary {
  background:
    linear-gradient(180deg, rgba(8,16,12,.12), rgba(9,19,13,.9)),
    radial-gradient(circle at 50% 14%, rgba(177,210,121,.42), transparent 36%),
    linear-gradient(145deg, #405638, #18251c);
}
.od-path-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(255,226,160,.18);
  border-radius: 18px;
  pointer-events: none;
}
.od-path-card:hover { transform: translateY(8px) scale(1.025); box-shadow: 0 32px 90px rgba(0,0,0,.55), 0 0 40px rgba(232,199,118,.16); }
.od-path-symbol { display: grid; place-items: center; width: 84px; height: 84px; margin: 15px auto 46px; border: 1px solid rgba(255,230,174,.4); border-radius: 50%; font-size: 35px; box-shadow: 0 0 35px rgba(255,205,103,.16); }
.od-path-card strong { display: block; font-family: Georgia, serif; font-size: 25px; font-weight: 500; letter-spacing: .05em; }
.od-path-card small { display: block; min-height: 66px; margin: 15px auto 25px; color: rgba(255,247,225,.72); font-family: Georgia, serif; font-size: 13px; line-height: 1.6; }
.od-path-card em { display: inline-flex; padding: 12px 22px; border-radius: 999px; color: #312039; background: rgba(255,245,219,.9); font-size: 10px; font-style: normal; font-weight: 850; letter-spacing: .12em; }
.od-return { justify-self: center; width: auto; padding: 11px 20px; border: 1px solid rgba(255,239,201,.3); color: #fff3d4; background: rgba(20,11,28,.42); backdrop-filter: blur(10px); }

.od-footer {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: max(15px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 11px;
  transform: translateX(-50%);
  color: rgba(255,241,208,.66);
  font-size: 10px;
  letter-spacing: .05em;
}
.od-footer button { border: 0; color: inherit; background: transparent; cursor: pointer; }
.od-footer button:hover { color: #fff6dc; }
.od-footer-dot { color: #d7ae5d; }

/* Opening state */
.od-login.is-opening .od-panel-wrap {
  opacity: 0;
  filter: blur(10px);
  transform: translate(-50%, -45%) scale(.91);
  pointer-events: none;
}
.od-login.is-opening .od-emblem { animation: emblem-awaken 1.25s ease-in-out infinite alternate; }
.od-login.is-opening .od-emblem-aura { opacity: 1; transform: scale(1.3); }
.od-login.is-opening .od-seam-light { opacity: 1; width: 10px; transform: translateX(-50%) scaleY(1); }
.od-login.is-opening .od-transition-copy { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.od-login.is-opening .od-atmosphere--mist { opacity: .52; }

.od-login.is-open .od-bg--closed { opacity: 0; transform: scale(1.03); }
.od-login.is-open .od-bg--open { opacity: 1; transform: scale(1); }
.od-login.is-open .od-seam-light { opacity: 0; width: 95px; }
.od-login.is-open .od-portal-glow { opacity: .52; transform: scale(.88); }
.od-login.is-open .od-world { transform: translate3d(0, 0, 0) scale(1.12); }
.od-login.is-open .od-transition-copy { opacity: 0; transform: translate(-50%, -54%) scale(1.06); }

.od-login.is-paths .od-world { transform: translate3d(0, 0, 0) scale(1.18); filter: brightness(.68) saturate(.9); }
.od-login.is-paths .od-paths {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
  transition: opacity 1s ease, transform 1.2s ease, visibility 0s;
}
.od-login.is-paths .od-path-card { transform: translateY(0); }
.od-login.is-paths .od-path-card:nth-child(2) { transition-delay: .12s; }
.od-login.is-paths .od-footer { opacity: .4; }

.od-login.is-reduced-motion *,
.od-login.is-reduced-motion *::before,
.od-login.is-reduced-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .od-login *, .od-login *::before, .od-login *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@keyframes mist-breathe { from { transform: translate3d(-1%,0,0) scale(1.02); opacity: .21; } to { transform: translate3d(1%, -1%, 0) scale(1.06); opacity: .35; } }
@keyframes sparkle-drift { from { transform: translate3d(-1%,1%,0) scale(1.02); opacity: .11; } to { transform: translate3d(1%,-1%,0) scale(1.07); opacity: .22; } }
@keyframes flora-sway { from { transform: rotate(-.8deg) translateY(2px); } to { transform: rotate(.9deg) translateY(-3px); } }
@keyframes flora-sway-right { from { transform: scaleX(-1) rotate(-.7deg) translateY(-1px); } to { transform: scaleX(-1) rotate(.8deg) translateY(3px); } }
@keyframes emblem-float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.015); } }
@keyframes aura-pulse { 0%,100% { transform: scale(.88); opacity: .42; } 50% { transform: scale(1.15); opacity: .78; } }
@keyframes panel-shine { 0%,60% { transform: translateX(-135%); } 78%,100% { transform: translateX(145%); } }
@keyframes button-glint { 0%,55% { left: -24%; } 78%,100% { left: 128%; } }
@keyframes wing-left { from { transform: rotate(-22deg) scaleX(.9); } to { transform: rotate(35deg) scaleX(.55); } }
@keyframes wing-right { from { transform: rotate(22deg) scaleX(.9); } to { transform: rotate(-35deg) scaleX(.55); } }
@keyframes emblem-awaken { from { filter: brightness(1) drop-shadow(0 0 10px rgba(244,192,88,.2)); } to { filter: brightness(1.45) drop-shadow(0 0 25px rgba(255,213,106,.9)); } }

@media (max-width: 760px) {
  .od-panel-wrap { top: 52%; width: min(390px, calc(100vw - 24px)); }
  .od-panel { padding: 52px 24px 22px; border-radius: 23px; }
  .od-emblem-wrap { top: -72px; width: 150px; height: 116px; }
  .od-panel h1 { font-size: 30px; }
  .od-path-grid { grid-template-columns: minmax(250px, 330px); max-height: 70svh; overflow: auto; padding: 4px 8px 18px; }
  .od-path-card { min-height: 320px; }
  .od-path-symbol { margin-bottom: 28px; }
  .od-paths { gap: 15px; padding: 70px 16px 30px; }
  .od-foreground { width: 72vw; height: 58vw; opacity: .58; }
  .od-footer { display: none; }
}

@media (max-height: 760px) and (min-width: 761px) {
  .od-panel-wrap { transform: translate(-50%, -49%) scale(.88); }
}
.od-login.is-leaving { animation: login-leave 1.05s ease forwards; pointer-events:none; }
@keyframes login-leave { to { opacity:0; filter:blur(9px) brightness(1.8); transform:scale(1.035); visibility:hidden; } }
.od-path-card { cursor:pointer; }