@font-face{font-family:Montserrat;src:url("fonts/Montserrat-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url("fonts/Montserrat-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--red:#c9272f;--ink:#111820}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;overflow-x:hidden}
body{font-family:Montserrat,Arial,sans-serif;background:#f7f4ee;color:var(--ink)}
.page{min-height:100svh;display:grid;place-items:center;background:radial-gradient(circle at 60% 42%,#fff 0%,#f7f4ee 78%)}
.stage{position:relative;width:min(100vw,177.78svh);aspect-ratio:16/9;overflow:hidden;isolation:isolate;background:#f7f4ee}
.art{position:absolute;inset:0;z-index:0;background:url("portal-concept.png") center/100% 100% no-repeat}
.portal-effects{position:absolute;z-index:3;left:55.2%;top:9.1%;width:27.7%;height:61.5%;pointer-events:none}
.sky-mask{position:absolute;left:20.5%;top:17%;width:58%;height:46%;clip-path:ellipse(47% 50% at 50% 50%);overflow:hidden}
.portal-dust{position:absolute;inset:12% 16% 30% 17%;overflow:hidden;clip-path:ellipse(48% 52% at 50% 50%)}.portal-dust i{position:absolute;bottom:-8%;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;opacity:0;animation:dust 5.8s linear infinite}.portal-dust i:nth-child(1){left:18%;animation-delay:-1s}.portal-dust i:nth-child(2){left:36%;animation-delay:-4s;scale:.7}.portal-dust i:nth-child(3){left:55%;animation-delay:-2s;scale:1.2}.portal-dust i:nth-child(4){left:72%;animation-delay:-5s;scale:.65}.portal-dust i:nth-child(5){left:83%;animation-delay:-3s}
.portal-shadow{position:absolute;z-index:1;left:55%;top:68.5%;width:29%;height:5%;border-radius:50%;background:#5c4b3f1a;filter:blur(15px);animation:shadowBreath 5s ease-in-out infinite;pointer-events:none}
.ribbon-sheen{position:absolute;z-index:4;left:18%;bottom:-2%;width:54%;height:26%;opacity:.36;clip-path:polygon(0 88%,19% 69%,43% 53%,69% 36%,82% 18%,100% 0,100% 20%,84% 37%,70% 55%,45% 70%,20% 84%,0 100%);background:linear-gradient(110deg,transparent 0 43%,#fff8 48%,transparent 55%);background-size:260% 100%;animation:ribbonGlint 5.2s cubic-bezier(.4,0,.25,1) infinite;pointer-events:none}
.status-sheen{display:none}
.bird{position:absolute;left:-12%;top:var(--y);width:var(--size);height:calc(var(--size)*.46);opacity:0;filter:blur(var(--blur));animation:fly var(--duration) linear forwards;transform-origin:center}.bird::before,.bird::after{content:"";position:absolute;top:42%;width:52%;height:48%;border-top:1.8px solid #1b2830;border-radius:50% 50% 0 0}.bird::before{right:48%;transform-origin:right center;animation:wingL .72s ease-in-out infinite}.bird::after{left:48%;transform-origin:left center;animation:wingR .72s ease-in-out infinite}
.mobile-copy{display:none}
.mobile-layout,.sun-wash{display:none}
@keyframes dust{0%{transform:translateY(0);opacity:0}15%{opacity:.8}80%{opacity:.35}100%{transform:translateY(-280px);opacity:0}}
@keyframes shadowBreath{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.91);opacity:.28}}
@keyframes ribbonGlint{0%{background-position:132% 0;opacity:.22}25%{opacity:.46}62%{background-position:-105% 0;opacity:.23}76%,100%{background-position:-105% 0;opacity:.15}}
@keyframes fly{0%{transform:translate(-80%,6px) scale(.85);opacity:0}8%{opacity:var(--opacity)}50%{transform:translate(620%,-7px) scale(1)}92%{opacity:var(--opacity)}100%{transform:translate(1450%,3px) scale(.92);opacity:0}}
@keyframes wingL{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-25deg)}}
@keyframes wingR{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(25deg)}}
@media(max-width:700px){
  .page{display:block;min-height:100svh;background:#f7f4ee}.stage{width:100%;height:100svh;min-height:0;aspect-ratio:auto;background:#f7f4ee}.art{background-image:url("mobile-portal-hero-large.png");background-size:cover;background-position:center top}
  .portal-effects{z-index:3;left:0;top:0;width:100%;height:100%}.sky-mask{z-index:2;left:22%;top:25%;width:54%;height:32%;clip-path:ellipse(46% 50% at 50% 50%)}.portal-dust{display:block;inset:auto;left:25%;top:27%;width:50%;height:28%;clip-path:ellipse(46% 50% at 50% 50%)}
  .sun-wash{display:block;position:absolute;z-index:1;left:23%;top:25%;width:55%;height:32%;clip-path:ellipse(46% 50% at 50% 50%);mix-blend-mode:screen;opacity:.7;background:radial-gradient(circle at 77% 28%,rgba(255,250,210,.95) 0 2%,rgba(255,224,164,.46) 12%,rgba(255,213,151,.13) 31%,transparent 53%),linear-gradient(125deg,transparent 34%,rgba(255,237,190,.22) 62%,transparent 86%);animation:sunBreathe 5s ease-in-out infinite;pointer-events:none}.sun-wash::after{content:"";position:absolute;inset:-35%;background:linear-gradient(112deg,transparent 44%,rgba(255,255,239,.48) 50%,transparent 56%);transform:translateX(-120%) rotate(8deg);animation:sunRay 6.2s ease-in-out infinite}
  .portal-shadow{display:none}.ribbon-sheen{display:block;z-index:4;left:8%;bottom:-2%;width:85%;height:31%;opacity:.48;clip-path:polygon(46% 0,58% 0,52% 16%,39% 27%,19% 39%,8% 52%,10% 65%,26% 78%,48% 100%,72% 100%,51% 83%,31% 66%,27% 53%,43% 39%,62% 23%,68% 0);background:linear-gradient(105deg,transparent 0 40%,#fff9 48%,transparent 56%);background-size:280% 100%;animation:ribbonGlint 4.1s cubic-bezier(.4,0,.25,1) infinite}
  .status-sheen{display:none}.mobile-copy{display:none}
  .mobile-layout{display:block;position:absolute;inset:0;z-index:6;pointer-events:none}.mobile-logo{position:absolute;top:3.3%;left:50%;width:49%;height:auto;transform:translateX(-50%)}
  .mobile-status{position:absolute;top:13.3%;left:5%;width:90%;margin:0;text-align:center;font-weight:700;font-size:clamp(10px,3.05vw,16px);letter-spacing:.025em;line-height:1.1;background:linear-gradient(108deg,#c9272f 28%,#c9272f 43%,#fff 50%,#c9272f 57%,#c9272f 72%);background-size:250% 100%;background-position:135% 0;color:transparent;-webkit-background-clip:text;background-clip:text;animation:statusTextGlint 8s linear infinite}
  .mobile-info-panel{position:absolute;left:9%;right:9%;bottom:13%;padding:2.1% 3.8% 2.35%;border:1px solid rgba(255,255,255,.8);border-radius:12px;background:linear-gradient(115deg,rgba(24,31,39,.9),rgba(24,31,39,.77));box-shadow:0 8px 22px rgba(20,22,27,.13);text-align:center;color:#fff}.mobile-info-panel h1{margin:0;font-size:clamp(12px,3.15vw,17px);line-height:1.2;letter-spacing:-.05em;font-weight:700;white-space:nowrap}.mobile-info-panel p{margin:2.4% 0 0;font-size:clamp(8px,2.18vw,11px);line-height:1.43;font-weight:500;color:#fff}.mobile-rule{display:block;width:70%;height:1px;margin:2.4% auto 0;background:linear-gradient(90deg,transparent,#dc3b41 16% 84%,transparent);position:relative}.mobile-rule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#dc3b41;transform:translate(-50%,-50%)}
  .mobile-contact-strip{position:absolute;z-index:7;left:0;right:0;bottom:0;min-height:9.2%;padding:2% 5.3% 1.5%;display:flex;align-items:center;gap:4%;color:#fff;background:linear-gradient(105deg,#bd222b 0%,#d02e38 47%,#b71f28 100%);clip-path:polygon(0 15%,100% 0,100% 100%,0 100%);pointer-events:auto}.mobile-contact-strip a,.mobile-contact-strip p{margin:0;color:#fff;text-decoration:none;display:flex;align-items:center;gap:6px;line-height:1.25}.mobile-contact-strip a{width:42%;font-size:clamp(7px,2.15vw,11px);font-weight:700;white-space:nowrap}.mobile-contact-strip p{width:58%;font-size:clamp(5.7px,1.56vw,8px);font-weight:500}.mobile-contact-strip b{font-family:Arial,sans-serif;font-size:1.7em;font-weight:400;line-height:1}
}
@keyframes statusGlint{0%,20%{background-position:145% 0;opacity:0}30%{opacity:.22}62%{background-position:-105% 0;opacity:.55}70%,100%{background-position:-105% 0;opacity:0}}
@keyframes statusTextGlint{from{background-position:135% 0}to{background-position:-135% 0}}
@keyframes sunBreathe{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:.84;transform:scale(1.04)}}
@keyframes sunRay{0%,22%{transform:translateX(-120%) rotate(8deg);opacity:0}38%{opacity:.8}68%{transform:translateX(120%) rotate(8deg);opacity:.2}100%{transform:translateX(120%) rotate(8deg);opacity:0}}
@keyframes processLine{0%,100%{opacity:.45;transform:scaleX(.6);transform-origin:left;box-shadow:0 0 0 rgba(207,43,51,0)}50%{opacity:1;transform:scaleX(1);box-shadow:0 0 11px rgba(207,43,51,.75)}}
@keyframes processDot{0%,100%{box-shadow:0 0 0 0 rgba(216,45,53,.42)}50%{box-shadow:0 0 0 7px rgba(216,45,53,0)}}
@media(prefers-reduced-motion:reduce){.portal-dust i,.portal-shadow,.ribbon-sheen,.status-sheen,.sun-wash,.mobile-status,.mobile-status::before,.mobile-status::after,.bird,.bird::before,.bird::after{animation:none}.bird{display:none}}