/* The panoramic opening keeps the original art, palette and gold controls. */
.portal-layout .hero {display:flex;align-items:center;isolation:isolate;position:relative;width:100%;margin:0;gap:0;padding:0;min-height:clamp(660px,calc(100svh - var(--portal-header-height)),820px);height:auto;overflow:hidden;background:var(--paper)}
.portal-layout .hero-art {position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:66% 22%;border:0;opacity:1;transform:none;animation:none}
.portal-layout .hero:after {content:'';display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 91%,transparent),color-mix(in srgb,var(--paper) 65%,transparent) 31%,transparent 65%),linear-gradient(0deg,var(--paper),transparent 22%)}
.portal-layout .hero-content {position:relative;z-index:3;width:calc(100% - 96px);max-width:1320px;margin:0 auto;padding:64px 0 86px;text-align:left}
.portal-layout .hero-content>.eyebrow {font-size:10px;letter-spacing:.2em;color:var(--gold-deep);margin:0 0 23px;max-width:47%}
.portal-layout .hero-wordmark {width:440px;max-width:48%;margin:0;font:500 clamp(76px,6.2vw,105px)/.93 var(--serif);letter-spacing:-.045em;text-align:center;color:#704b30;text-shadow:0 1px 0 #fff8}
.portal-layout .hero-wordmark>span {display:block;width:100%;background:linear-gradient(105deg,#613d28 8%,#81562f 33%,#ad8048 48%,#6b452b 63%,#613d28 88%);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;animation:mana-title-light 13s ease-in-out infinite}
.portal-layout .hero-wordmark>span:first-child {font-size:.61em;letter-spacing:.1em;margin-bottom:14px}
.portal-layout .hero-wordmark i {font:italic .31em Georgia,serif;letter-spacing:0;color:var(--gold-deep);-webkit-text-fill-color:currentColor;margin-right:8px}
.portal-layout .ornament {display:flex;align-items:center;justify-content:center;gap:16px;width:440px;max-width:48%;margin:27px 0 26px;color:var(--gold-deep);font-size:25px}
.portal-layout .ornament i {height:1px;flex:1;max-width:112px;background:linear-gradient(90deg,transparent,var(--gold));opacity:.5}
.portal-layout .ornament i:last-child {transform:rotate(180deg)}
.portal-layout .hero h2 {font:500 clamp(25px,2.2vw,32px)/1.3 var(--serif);font-variant:small-caps;letter-spacing:-.02em;color:var(--ink);max-width:48%;margin:0}
.portal-layout .hero-description {font-size:15px;line-height:1.9;color:var(--muted);max-width:min(46%,480px);margin:23px 0 0}
.portal-layout .hero-actions {display:flex;justify-content:flex-start;gap:16px;flex-wrap:wrap;margin-top:32px;max-width:52%}
.portal-layout .hero-actions .button {min-height:48px;padding:14px 22px;font-size:12px}
.portal-layout .hero .button-glass {background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid var(--line);border-radius:3px;padding:14px 20px;backdrop-filter:blur(4px);color:var(--ink)}
.portal-layout .hero .button-glass:hover {background:var(--surface);border-color:var(--gold)}
.portal-layout .hero-note {font-size:8px;letter-spacing:.14em;color:var(--muted);margin-top:22px;max-width:48%}
.portal-layout .hero-art-caption {position:absolute;right:20px;bottom:8px;z-index:3;max-width:50%;margin:0;padding:0;background:none;border:0;font-size:8px;color:var(--muted)}
.portal-layout .scroll-cue {position:absolute;z-index:4;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.scroll-cue>span:last-child {font-size:23px;line-height:1;color:var(--gold-deep)}
.hero-petals {position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;user-select:none;contain:strict}
.petal-track {position:absolute;top:-40px;bottom:-40px;left:var(--petal-left);width:24px;opacity:0;animation:petal-fall var(--petal-duration) var(--petal-delay) linear infinite;will-change:transform}
.petal-track i {display:block;width:var(--petal-size);height:calc(var(--petal-size) * .65);border-radius:75% 12% 65% 25%;background:linear-gradient(135deg,#fffdf3 8%,#f8ddd5 48%,#d9aaa1);box-shadow:inset 1px 1px 2px #fff9,0 2px 3px #76503b0d;animation:petal-tumble var(--petal-turn) var(--petal-delay) ease-in-out infinite alternate}
.petal-track:nth-child(3n) i {background:linear-gradient(135deg,#fffef5,#f5e8c4 70%,#ddc390)}
.petal-track:nth-child(4n) {filter:blur(.6px)}
.mana-emblem {position:relative;display:inline-grid;place-items:center;flex-shrink:0;isolation:isolate}
.mana-emblem>img {position:relative;z-index:1;animation:mana-emblem-light 4.5s ease-in-out infinite}
.mana-emblem:before {content:'';position:absolute;inset:-7px;z-index:0;border-radius:50%;background:radial-gradient(ellipse,#80e1d34d,transparent 68%);animation:mana-crystal-aura 4.5s ease-in-out infinite;pointer-events:none}
.mana-emblem:after {content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,transparent 60%,#edd091b0 85%,transparent 99%);mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:mana-emblem-orbit 10s linear infinite;pointer-events:none}
.mana-crystal-light {position:absolute;left:37%;top:12.8%;width:26.1%;height:63.2%;z-index:2;overflow:hidden;clip-path:polygon(50% 0,100% 33%,100% 70%,50% 100%,0 70%,0 33%);background:radial-gradient(ellipse,#c8fff6a6,#62d1df33 65%,transparent);mix-blend-mode:screen;animation:mana-crystal-pulse 4.5s ease-in-out infinite;pointer-events:none}
.mana-crystal-light:before {content:'';position:absolute;inset:-55% -20% auto;height:45%;background:linear-gradient(180deg,transparent,#fffef5e6 55%,transparent);transform:rotate(-20deg);animation:mana-crystal-sheen 4.5s ease-in-out infinite}
.mana-sparkles {position:absolute;inset:-4px;z-index:3;pointer-events:none}
.mana-sparkles i {position:absolute;display:block;width:3px;height:3px;background:#d6b45f;border-radius:1px;box-shadow:0 0 5px #d6b45f99;animation:mana-sparkle-rise 4.5s ease-in-out infinite}
.mana-sparkles i:first-child {left:0;bottom:2px;animation-delay:-1.5s}
.mana-sparkles i:nth-child(2) {right:0;top:9px;animation-delay:-3s;background:#80cfc8;box-shadow:0 0 5px #80cfc8b3}
.mana-sparkles i:nth-child(3) {left:55%;top:0;width:2px;height:2px;animation-delay:-.6s}
@keyframes petal-fall {0%{transform:translate3d(-30px,-8%,0);opacity:0}10%{opacity:var(--petal-opacity)}85%{opacity:var(--petal-opacity)}100%{transform:translate3d(var(--petal-drift),110%,0);opacity:0}}
@keyframes petal-tumble {0%{transform:translateX(-12px) rotate(-35deg) scaleX(.65)}50%{transform:translateX(10px) rotate(55deg) scaleX(1)}100%{transform:translateX(-4px) rotate(150deg) scaleX(.45)}}
@keyframes mana-title-light {0%,25%,100%{background-position:100% 50%}65%,80%{background-position:0 50%}}
@keyframes mana-emblem-light {0%,100%{filter:drop-shadow(0 0 1px #d7b67155)}50%{filter:drop-shadow(0 0 5px #68bdbaaa)}}
@keyframes mana-emblem-orbit {to{transform:rotate(360deg)}}
@keyframes mana-crystal-aura {0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}
@keyframes mana-crystal-pulse {0%,100%{opacity:.2}45%,60%{opacity:.85}}
@keyframes mana-crystal-sheen {0%,20%{transform:translateY(0) rotate(-20deg);opacity:0}35%{opacity:1}65%,100%{transform:translateY(380%) rotate(-20deg);opacity:0}}
@keyframes mana-sparkle-rise {0%{opacity:0;transform:translateY(4px) rotate(0) scale(.3)}30%,65%{opacity:.85}100%{opacity:0;transform:translateY(-7px) rotate(90deg) scale(.4)}}
[data-theme=dark] .hero-wordmark>span,[data-theme=blue] .hero-wordmark>span {background-image:linear-gradient(105deg,#d3ac66 8%,#f7e7be 42%,#fffaf0 50%,#cba463 66%,#e7ca8d 88%);text-shadow:none}
@media(min-width:1024px) and (max-width:1279px) {
  .portal-layout .hero-content {width:calc(100% - 64px)}
  .portal-layout .hero-wordmark {font-size:76px}
  .portal-layout .hero h2 {font-size:25px;max-width:51%}
  .portal-layout .hero-description {font-size:14px;max-width:48%}
  .portal-layout .hero-actions {max-width:56%;gap:12px}
  .portal-layout .hero-actions .button {padding-inline:16px;font-size:11px}
}
@media(max-width:1023px) {
  .portal-layout .hero {height:auto;min-height:720px}
  .portal-layout .hero-content {width:calc(100% - 64px);padding-block:64px 100px}
  .portal-layout .hero-wordmark {font-size:86px}
  .portal-layout .hero h2 {font-size:27px}
  .portal-layout .hero-description {font-size:14px}
}
@media(max-width:600px) {
  .portal-layout .hero {min-height:710px}
  .portal-layout .hero-content {width:calc(100% - 44px);padding:56px 0 105px}
  .portal-layout .hero-art {object-position:65% top;opacity:.85}
  .portal-layout .hero:after {background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 94%,transparent),color-mix(in srgb,var(--paper) 76%,transparent) 56%,color-mix(in srgb,var(--paper) 22%,transparent)),linear-gradient(0deg,var(--paper),transparent 40%)}
  .portal-layout .hero-content>.eyebrow {max-width:none;font-size:8px;margin-bottom:25px}
  .portal-layout .hero-wordmark {font-size:82px;width:305px;max-width:100%;text-align:left}
  .portal-layout .hero-wordmark>span:first-child {font-size:.59em;letter-spacing:.09em;margin-bottom:13px}
  .portal-layout .ornament {width:290px;max-width:100%;margin-block:26px}
  .portal-layout .hero h2 {font-size:27px;max-width:310px}
  .portal-layout .hero-description {max-width:320px;font-size:14px;line-height:1.85;margin-top:20px}
  .portal-layout .hero-actions {max-width:none;gap:12px;margin-top:26px}
  .portal-layout .hero-actions .button {min-height:46px;padding-inline:17px;font-size:11px}
  .portal-layout .hero-note {max-width:none;font-size:7px;letter-spacing:.09em}
  .portal-layout .hero-art-caption {max-width:none;right:14px;font-size:7px}
  .petal-track:nth-child(n+13) {display:none}
}
@media(max-width:350px) {
  .portal-layout .hero-wordmark {font-size:72px}
  .portal-layout .hero h2 {font-size:25px}
  .portal-layout .hero-actions {gap:9px}
  .portal-layout .hero-actions .button {padding-inline:12px;font-size:10px}
}
.portal-motion-paused .hero-petals {display:none}
.portal-motion-paused :is(.petal-track,.petal-track i,.hero-wordmark>span,.mana-emblem>img),.portal-page-hidden :is(.petal-track,.petal-track i,.hero-wordmark>span,.mana-emblem>img),.atmosphere-suspended :is(.petal-track,.petal-track i,.hero-wordmark>span) {animation-play-state:paused!important}
.portal-motion-paused .mana-emblem:after,.portal-page-hidden .mana-emblem:after {animation-play-state:paused!important}
.portal-motion-paused .mana-emblem *,.portal-motion-paused .mana-emblem:before,.portal-motion-paused .mana-crystal-light:before,.portal-page-hidden .mana-emblem *,.portal-page-hidden .mana-emblem:before,.portal-page-hidden .mana-crystal-light:before {animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce) {
  .hero-petals {display:none}
  .petal-track,.petal-track i,.hero-wordmark>span,.mana-emblem>img,.mana-emblem:after {animation:none!important}
  .mana-emblem *,.mana-emblem:before,.mana-crystal-light:before {animation:none!important}
  .mana-sparkles {display:none}
}
