/* Block shaped details give the roleplay landing page a clearer Minecraft feel. */
.brand-logo{image-rendering:pixelated;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55))}
.sun{border-radius:0;box-shadow:0 0 0 8px rgba(255,138,61,.08),0 0 0 20px rgba(255,138,61,.035),12px 12px 0 rgba(74,37,24,.22)}
.city-skyline{border-top:0;background-image:linear-gradient(90deg,transparent 0 11px,rgba(255,190,123,.23) 11px 16px,transparent 16px 29px),linear-gradient(transparent 0 10px,rgba(255,203,146,.17) 10px 15px,transparent 15px 27px);background-size:34px 31px}
.skyline-far{background-image:linear-gradient(90deg,transparent 0 12px,rgba(255,190,123,.16) 12px 16px,transparent 16px 35px),linear-gradient(transparent 0 13px,rgba(255,203,146,.12) 13px 17px,transparent 17px 33px);background-size:43px 37px}
.street{height:19%;background:linear-gradient(to bottom,#769449 0 9px,#5d7b3b 9px 16px,#795435 16px 52%,#655039 52% 100%);border-top:0;box-shadow:inset 0 4px rgba(190,218,121,.25)}
.street:after{background:repeating-linear-gradient(90deg,transparent 0 35px,rgba(24,35,24,.32) 35px 39px),linear-gradient(180deg,rgba(255,138,61,.12),transparent);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%)}
.voxel-block{position:absolute;z-index:2;bottom:17%;width:72px;height:54px;background:#795638;box-shadow:inset 0 0 0 3px rgba(0,0,0,.14),4px 5px 0 rgba(0,0,0,.23);image-rendering:pixelated}
.voxel-block:before{content:"";position:absolute;left:0;top:-25px;width:100%;height:26px;background:#9ebd60;clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%);filter:drop-shadow(0 -3px 0 #b3cf72)}
.voxel-block:after{content:"";position:absolute;right:-23px;top:-12px;width:24px;height:66px;background:#59412d;clip-path:polygon(0 0,100% 21%,100% 100%,0 100%)}
.block-grass{left:10%;border-top:8px solid #789347}
.block-stone{right:13%;width:46px;height:40px;bottom:16%;background:#73756c;border-top:7px solid #a0a097;transform:scale(.8)}
.block-stone:before{background:#b7b7ab;filter:drop-shadow(0 -3px 0 #d3d0bf)}
.block-stone:after{background:#565b55;height:53px;top:-13px}
.button,.nav-join,.join-box,.server-card,.feature-card{border-radius:0}
.button-primary{box-shadow:inset 0 3px rgba(255,255,255,.22),inset 0 -4px rgba(119,50,16,.3),4px 4px 0 rgba(0,0,0,.35)}
.button-primary:hover{box-shadow:inset 0 3px rgba(255,255,255,.27),inset 0 -4px rgba(119,50,16,.3),6px 6px 0 rgba(0,0,0,.32)}
.nav-join{box-shadow:inset 0 -3px rgba(255,138,61,.12)}
.feature-card{box-shadow:0 5px 0 rgba(0,0,0,.25)}
.feature-art:after{background-image:linear-gradient(rgba(255,255,255,.055) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.055) 2px,transparent 2px);background-size:24px 24px;mix-blend-mode:screen}
.block-house{box-shadow:inset 0 -22px #8c6747,4px 5px 0 rgba(0,0,0,.22)}
.block-house:before{clip-path:polygon(0 40%,50% 0,100% 40%,100% 100%,0 100%);background:#744639}
.pixel-moon{border-radius:0}
.phone-shape{border-radius:8px;box-shadow:0 0 0 3px #3a332a,0 18px 36px #131411}
.phone-shape i{border-radius:2px}
.intro-stamp{border-radius:0;transform:rotate(-3deg);background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(255,138,61,.035) 7px 8px)}
.server-icon{box-shadow:inset 0 0 0 2px rgba(255,138,61,.22)}
.art-label,.server-card small,.server-tag,.section-kicker,.eyebrow{font-family:"Courier New",monospace;letter-spacing:.13em}
.site-header{border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(5px)}
.brand{gap:13px;text-shadow:0 2px 9px rgba(0,0,0,.45)}
.brand-logo{width:46px;height:46px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.38))}
.site-nav{gap:32px;text-shadow:0 2px 8px rgba(0,0,0,.65)}
.site-nav>a:not(.nav-join){transition:color .18s ease,transform .18s ease}
.site-nav>a:not(.nav-join):hover{transform:translateY(-2px)}
.hero{background:#19262b}
.hero:after{background:linear-gradient(180deg,rgba(7,12,16,.42) 0%,rgba(12,18,20,.13) 34%,rgba(12,17,18,.52) 68%,#101411 100%)}
.hero-content{animation:hero-enter .65s ease-out both}
.hero h1{letter-spacing:-.065em;text-wrap:balance}
.hero h1 span{text-shadow:0 0 32px rgba(255,138,61,.22)}
.eyebrow{font-weight:700;text-shadow:0 2px 8px #080c0e}
.hero-content>p{color:#f0ece2;text-shadow:0 2px 7px rgba(0,0,0,.75)}
.pixel-clouds{position:absolute;top:21%;left:5%;right:5%;height:23%;opacity:.24;background:linear-gradient(#edc4a0,#edc4a0) 7% 56%/54px 10px,linear-gradient(#edc4a0,#edc4a0) 11% 47%/30px 10px,linear-gradient(#edc4a0,#edc4a0) 77% 22%/64px 10px,linear-gradient(#edc4a0,#edc4a0) 82% 13%/34px 10px,linear-gradient(#edc4a0,#edc4a0) 48% 8%/20px 5px,linear-gradient(#edc4a0,#edc4a0) 33% 37%/5px 5px; background-repeat:no-repeat;image-rendering:pixelated}
.sun{box-shadow:0 0 0 8px rgba(255,138,61,.09),0 0 0 22px rgba(255,138,61,.035),12px 12px 0 rgba(74,37,24,.2);animation:sun-glow 5s ease-in-out infinite alternate}
.moon{font-size:27px;text-shadow:0 0 16px rgba(255,229,184,.38)}
.server-card{border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05)}
.button{font-weight:700;letter-spacing:.015em}
.button-primary{color:#28170f;background:linear-gradient(180deg,#ffad69,#f17c36);box-shadow:inset 0 2px rgba(255,255,255,.25),inset 0 -4px rgba(129,55,20,.25),0 5px 0 #a94e28,0 12px 25px rgba(0,0,0,.2)}
.button-primary:hover{background:linear-gradient(180deg,#ffc184,#ff8d45);transform:translateY(-2px)}
.button-light{box-shadow:inset 0 2px rgba(255,255,255,.08),inset 0 -4px rgba(0,0,0,.28),0 5px 0 rgba(78,37,18,.42)}
.text-link{padding:13px 3px;border-bottom:1px solid rgba(255,255,255,.3)}
.intro{position:relative}
.intro:after{content:"";position:absolute;right:10%;bottom:50px;width:84px;height:12px;background:repeating-linear-gradient(90deg,rgba(255,138,61,.7) 0 12px,transparent 12px 18px);opacity:.52}
.intro-copy p,.section-heading>p,.join-content>div:first-child p{color:#b7bbb2}
.feature-card{border:1px solid rgba(255,255,255,.13);box-shadow:0 5px 0 rgba(0,0,0,.2),0 12px 30px rgba(0,0,0,.12)}
.feature-card:hover{box-shadow:0 7px 0 rgba(0,0,0,.18),0 19px 35px rgba(0,0,0,.21)}
.feature-art{isolation:isolate}
.feature-art:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%,rgba(0,0,0,.16));pointer-events:none}
.feature-info{background:linear-gradient(140deg,#191f1e,#151a18)}
.feature-info h3{font-size:20px;line-height:1.2}
.feature-info>span:first-child{display:inline-block;padding:5px 7px;background:rgba(255,138,61,.1);border-left:2px solid var(--accent)}
.community{background:linear-gradient(115deg,#ff9b54,#f27b36 57%,#df672f);position:relative;isolation:isolate}
.community:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.12;background:linear-gradient(90deg,#692d18 10px,transparent 10px) 0 0/48px 48px,linear-gradient(#692d18 10px,transparent 10px) 0 0/48px 48px;mask-image:linear-gradient(90deg,transparent,#000)}
.community-inner{padding-top:105px;padding-bottom:108px}
.community h2{text-shadow:0 2px 0 rgba(255,255,255,.1)}
.community .section-kicker{display:inline-block;padding:7px 9px;background:rgba(66,32,18,.1)}
.community-spark{font-size:clamp(150px,22vw,285px);color:rgba(69,31,17,.12);text-shadow:8px 8px rgba(255,255,255,.08)}
.join-box{position:relative;background:linear-gradient(145deg,#171d1c,#131817);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.join-box:before{content:"";position:absolute;top:0;right:0;width:24px;height:7px;background:var(--accent);box-shadow:-7px 7px 0 rgba(255,138,61,.28)}
.address-row code{font-weight:700}
.copy-message{line-height:1.5}
.site-footer{background:linear-gradient(90deg,#101615,#0e1212);border-top-color:rgba(255,255,255,.12)}
.site-footer .brand-logo{width:37px;height:37px}
@keyframes hero-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes sun-glow{from{filter:brightness(.96)}to{filter:brightness(1.08)}}
@media(prefers-reduced-motion:reduce){.hero-content,.sun{animation:none!important}}
@media(max-width:650px){
  .site-header{backdrop-filter:none;background:linear-gradient(180deg,rgba(8,12,13,.48),transparent)}
  .site-nav{gap:22px}
  .brand-logo{width:39px;height:39px}
  .hero h1{font-size:clamp(48px,11.8vw,72px)}
  .pixel-clouds{top:38%;left:2%;right:2%;height:13%;opacity:.16}
  .server-card{backdrop-filter:blur(8px)}
  .intro:after{right:7%;bottom:43px;width:58px}
  .community-inner{padding-top:80px;padding-bottom:84px}
  .community-spark{top:60%;right:1%;font-size:120px}
  .site-footer .brand-logo{width:31px;height:31px}
}
@media(max-width:370px){
  .site-header .brand{font-size:13px;gap:8px}
  .site-header .brand-logo{width:34px;height:34px}
  .hero-actions .button{gap:9px;padding:14px 12px}
  .server-card{gap:8px;padding:10px}
  .server-card strong{font-size:9px}
  .server-tag{padding:4px}
}
.site-nav{gap:clamp(12px,1.7vw,23px);font-size:12px}
.nav-join{padding:10px 12px}
.portal{padding-top:108px;padding-bottom:125px}
.portal .section-heading{margin-bottom:38px}
.portal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.portal-card{position:relative;min-height:218px;padding:22px 19px 18px;background:linear-gradient(145deg,#1a211e,#141918);border:1px solid rgba(255,255,255,.11);box-shadow:0 4px 0 rgba(0,0,0,.22);scroll-margin-top:105px;transition:transform .2s,border-color .2s,background .2s}
.portal-card:before{content:"";position:absolute;top:0;right:0;width:16px;height:5px;background:rgba(255,138,61,.66)}
.portal-card:hover{transform:translateY(-4px);border-color:rgba(255,138,61,.42);background:linear-gradient(145deg,#202722,#171c1a)}
.portal-icon{display:grid;place-items:center;width:36px;height:36px;margin-bottom:20px;color:#ffab6c;background:rgba(255,138,61,.12);box-shadow:inset 0 0 0 2px rgba(255,138,61,.12);font-size:19px}
.portal-card>small{font:9px "Courier New",monospace;letter-spacing:.12em;color:#8f998e}
.portal-card h3{font:600 20px var(--display);letter-spacing:-.04em;margin:8px 0}
.portal-card p{font-size:12px;line-height:1.6;color:#aeb4aa;margin:0 0 17px}
.portal-status{display:inline-block;padding:5px 7px;color:#f2aa77;background:rgba(255,138,61,.1);font:9px "Courier New",monospace;letter-spacing:.1em}
.menu-toggle{color:#f2f0e9}
.menu-toggle:focus-visible,.site-nav a:focus-visible{outline:2px solid #ffab6c;outline-offset:4px}
@media(max-width:1180px){
  .site-header{height:82px}
  .menu-toggle{display:flex;position:relative;top:auto;right:auto;align-self:center;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);background:rgba(15,21,19,.55)}
  .site-nav{display:none;position:absolute;top:calc(100% - 1px);left:5%;right:5%;max-height:calc(100svh - 105px);overflow:auto;padding:17px;background:rgba(16,22,20,.97);border:1px solid rgba(255,255,255,.15);box-shadow:0 15px 40px rgba(0,0,0,.3);backdrop-filter:blur(12px);grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .site-nav.is-open{display:grid}
  .site-nav>a:not(.nav-join){padding:12px 10px;background:rgba(255,255,255,.035)}
  .site-nav .nav-join{grid-column:1/-1;text-align:center}
  .portal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){.portal{padding-top:86px;padding-bottom:95px}.portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
  .site-header{height:76px}
  .menu-toggle{position:absolute;top:16px;right:6%;width:42px;height:42px}
  .site-nav{top:75px;left:0;right:0;padding:18px 7% 23px;max-height:calc(100svh - 76px);border-left:0;border-right:0;border-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .site-nav.is-open{display:grid}
  .site-nav .nav-join{grid-column:1/-1}
  .portal{padding-top:75px;padding-bottom:86px}
  .portal .section-heading{margin-bottom:25px}
  .portal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .portal-card{min-height:205px;padding:17px 14px 15px}
  .portal-icon{width:32px;height:32px;margin-bottom:15px}
  .portal-card h3{font-size:18px}
  .portal-card p{font-size:11px}
}
@media(max-width:370px){.portal-grid{grid-template-columns:1fr}.portal-card{min-height:0}.portal-card p{max-width:28em}}
@media(min-width:1181px){
  .site-nav{position:absolute;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%)}
}
@media(max-width:1180px){
  .site-nav{top:calc(100% - 1px);left:5%;right:5%;transform:none}
  .site-nav>a:not(.nav-join),.site-nav .nav-join{text-align:center}
}
@media(max-width:650px){.site-nav{top:75px;left:0;right:0;transform:none}}
.sun{top:17%;right:5%}
.hero h1 span{position:relative;color:#ff9a52;text-shadow:2px 2px 0 #251713,-2px 2px 0 #251713,2px -2px 0 #251713,-2px -2px 0 #251713,0 5px 15px rgba(0,0,0,.72)}
@media(max-width:650px){.sun{top:36%;right:-14px;width:86px;height:86px;opacity:.8}.hero h1 span{color:#ffad6c;text-shadow:2px 2px 0 #1c1514,-2px 2px 0 #1c1514,2px -2px 0 #1c1514,-2px -2px 0 #1c1514,0 4px 12px rgba(0,0,0,.75)}}
.hero-art{background:radial-gradient(ellipse at 51% 67%,rgba(255,151,85,.38),transparent 34%),radial-gradient(ellipse at 50% 42%,rgba(103,107,131,.28),transparent 54%),linear-gradient(180deg,#101a2a 0%,#233044 32%,#61505b 56%,#d4774e 79%,#26302a 100%)}
.hero-art:before{content:"";position:absolute;inset:0 0 28%;pointer-events:none;opacity:.8;background-image:linear-gradient(#fff0cb,#fff0cb),linear-gradient(#fff0cb,#fff0cb),linear-gradient(#ffd7a8,#ffd7a8),linear-gradient(#fff0cb,#fff0cb),linear-gradient(#ffd7a8,#ffd7a8),linear-gradient(#fff0cb,#fff0cb),linear-gradient(#fff0cb,#fff0cb),linear-gradient(#ffd7a8,#ffd7a8),linear-gradient(#fff0cb,#fff0cb);background-repeat:no-repeat;background-size:3px 3px,2px 2px,3px 3px,2px 2px,3px 3px,2px 2px,3px 3px,2px 2px,3px 3px;background-position:8% 17%,18% 42%,27% 14%,39% 29%,62% 12%,72% 37%,84% 20%,92% 46%,51% 8%;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 68%,transparent 100%)}
.pixel-clouds{top:25%;left:0;right:0;height:22%;opacity:.17;background:linear-gradient(#f5d1b5,#f5d1b5) 4% 52%/60px 9px,linear-gradient(#f5d1b5,#f5d1b5) 9% 40%/33px 12px,linear-gradient(#f5d1b5,#f5d1b5) 16% 62%/28px 8px,linear-gradient(#f5d1b5,#f5d1b5) 75% 38%/70px 10px,linear-gradient(#f5d1b5,#f5d1b5) 82% 27%/38px 11px,linear-gradient(#f5d1b5,#f5d1b5) 89% 47%/29px 8px,linear-gradient(#f5d1b5,#f5d1b5) 41% 19%/22px 6px;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 4px rgba(20,29,43,.18))}
.sun{background:linear-gradient(145deg,#fff0b8 0%,#ffbd78 48%,#ed8750 100%);box-shadow:0 0 0 8px rgba(255,199,128,.11),0 0 0 21px rgba(255,138,61,.045),12px 12px 0 rgba(74,37,24,.2);animation:sun-glow 6s ease-in-out infinite alternate}
.skyline-far{background-color:#35404a;background-image:linear-gradient(90deg,transparent 0 14px,rgba(255,200,135,.22) 14px 19px,transparent 19px 39px),linear-gradient(transparent 0 12px,rgba(255,212,155,.15) 12px 17px,transparent 17px 35px);background-size:47px 39px}
.skyline-near{background-color:#222c2b;background-image:linear-gradient(90deg,transparent 0 12px,rgba(255,183,117,.24) 12px 17px,transparent 17px 31px),linear-gradient(transparent 0 11px,rgba(255,203,145,.17) 11px 16px,transparent 16px 29px);background-size:36px 33px}
.street{background:linear-gradient(to bottom,#91aa58 0 7px,#607e43 7px 14px,#735039 14px 52%,#554333 52% 100%);box-shadow:inset 0 3px rgba(207,226,145,.28),0 -7px 24px rgba(16,22,20,.22)}
.hero:after{background:linear-gradient(180deg,rgba(7,12,16,.22) 0%,rgba(12,18,20,.08) 36%,rgba(12,17,18,.36) 65%,#101411 100%)}
@media(max-width:650px){
  .hero-art{background:radial-gradient(ellipse at 50% 68%,rgba(255,151,85,.38),transparent 35%),linear-gradient(180deg,#111b2b 0%,#2b3445 38%,#c77750 73%,#27302a 100%)}
  .hero-art:before{inset:5% 0 36%;opacity:.66}
  .pixel-clouds{top:41%;height:14%;opacity:.13}
  .skyline-far{background-size:38px 31px}
  .skyline-near{background-size:30px 28px}
}
.hero-art{background-image:linear-gradient(180deg,rgba(8,13,19,.1) 0%,rgba(10,15,20,.08) 48%,rgba(12,17,18,.54) 100%),url("assets/abbysalmc-city-hero.png");background-size:cover;background-position:center 62%}
.pixel-clouds,.sun,.city-skyline,.street,.voxel-block{display:none}
.hero-art:before{opacity:.32}
@media(max-width:650px){
  .hero-art{background-image:linear-gradient(180deg,rgba(8,13,19,.14) 0%,rgba(10,15,20,.08) 44%,rgba(12,17,18,.5) 100%),url("assets/abbysalmc-city-hero.png");background-position:center 66%}
}
.feature-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%;filter:brightness(.94) saturate(.9);transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .35s}
.feature-card:hover .feature-image{transform:scale(1.045);filter:brightness(1) saturate(1)}
.art-build .feature-image{object-position:center 64%}
.art-explore .feature-image{object-position:center 55%}
.art-connect .feature-image{object-position:center 53%}
.feature-art:after{opacity:.32}
@media(max-width:900px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-card.feature-large{grid-column:1/-1}
  .feature-large .feature-art{height:350px}
}
@media(max-width:650px){
  .feature-grid{grid-template-columns:1fr}
  .feature-card.feature-large{grid-column:auto}
  .feature-art,.feature-large .feature-art{height:245px}
}
@media(prefers-reduced-motion:reduce){.feature-image{transition:none}}
/* Small, gentle motion adds life without distracting from the page. */
.hero-art{animation:scene-arrive 1.5s cubic-bezier(.2,.7,.2,1) both;transform-origin:center 62%}
.hero-art:before{animation:star-twinkle 4.2s ease-in-out 1.1s infinite alternate}
.hero .eyebrow{animation:copy-arrive .55s ease-out .12s both}
.hero h1{animation:copy-arrive .7s cubic-bezier(.2,.75,.2,1) .2s both}
.hero-content>p{animation:copy-arrive .65s ease-out .32s both}
.hero-actions{animation:copy-arrive .65s ease-out .43s both}
.hero .server-card{animation:copy-arrive .65s ease-out .54s both}
.status-dot{animation:status-glow 2.4s steps(2,end) infinite}
.button span,.text-link span,.feature-arrow{transition:transform .22s ease,color .22s ease}
.button:hover span,.text-link:hover span{transform:translate(3px,-2px)}
.feature-card:hover .feature-arrow{transform:translate(3px,-3px);color:var(--accent)}
.portal-icon{transition:transform .22s steps(3,end),box-shadow .22s ease}
.portal-card:hover .portal-icon{transform:translateY(-3px);box-shadow:inset 0 0 0 2px rgba(255,138,61,.2),3px 3px 0 rgba(0,0,0,.2)}
@keyframes scene-arrive{from{opacity:.45;transform:scale(1.055)}to{opacity:1;transform:scale(1)}}
@keyframes star-twinkle{from{opacity:.18}to{opacity:.58}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes status-glow{0%,100%{box-shadow:0 0 5px rgba(244,168,106,.45)}50%{box-shadow:0 0 13px rgba(244,168,106,.95)}}
@media(prefers-reduced-motion:reduce){
  .hero-art,.hero-art:before,.hero .eyebrow,.hero h1,.hero-content>p,.hero-actions,.hero .server-card,.status-dot{animation:none!important}
  .button span,.text-link span,.feature-arrow,.portal-icon{transition:none!important}
}
@media(hover:none){.feature-image,.feature-card,.feature-arrow,.portal-icon{transition:none!important}}
.hero h1{font-size:clamp(46px,5.7vw,70px);line-height:1.04;letter-spacing:-.05em;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.hero h1 span{color:var(--accent);text-shadow:0 2px 8px rgba(0,0,0,.28)}
.moon{animation:star-bob 3.4s ease-in-out infinite}
.button-primary{animation:cta-breathe 4s ease-in-out 1.4s infinite}
.button-primary:hover{animation-play-state:paused}
.community-spark{animation:spark-drift 8s ease-in-out infinite}
.portal-icon{translate:0 0;animation:icon-bob 4.8s ease-in-out infinite}
.portal-card:nth-child(3n + 2) .portal-icon{animation-delay:.65s}
.portal-card:nth-child(3n) .portal-icon{animation-delay:1.3s}
.brand-logo{transition:transform .24s ease,filter .24s ease}
.brand:hover .brand-logo{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 5px 5px rgba(0,0,0,.4))}
@keyframes star-bob{0%,100%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-5px) rotate(12deg) scale(1.08)}}
@keyframes cta-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@keyframes spark-drift{0%,100%{transform:translateY(-50%) rotate(-4deg)}50%{transform:translateY(calc(-50% - 10px)) rotate(4deg)}}
@keyframes icon-bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media(max-width:650px){.hero h1{font-size:clamp(36px,10vw,58px);line-height:1.06}.hero h1 span{white-space:nowrap}.community-spark{animation-duration:9s}}
@media(max-width:370px){.hero h1{font-size:36px}}
/* A seamless voxel day/night loop: night -> dawn -> day -> sunset -> night. */
.hero-art{background:#101a2a;isolation:isolate}
.cycle-sky{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 62%;pointer-events:none}
.cycle-night{background-image:url("assets/abbysalmc-city-night.png");opacity:1;animation:cycle-night 48s linear infinite}
.cycle-dusk{background-image:url("assets/abbysalmc-city-hero.png");opacity:0;animation:cycle-dusk 48s linear infinite}
.cycle-day{background-image:url("assets/abbysalmc-city-day.png");opacity:0;animation:cycle-day 48s linear infinite}
.hero-art:before{z-index:4;opacity:0;animation:cycle-stars 48s linear infinite;pointer-events:none}
.sun{display:block;position:absolute;z-index:5;left:-8%;top:62%;right:auto;width:clamp(42px,5vw,76px);height:clamp(42px,5vw,76px);background:linear-gradient(145deg,#fff6bd,#ffc260 70%,#f49349);clip-path:polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%);box-shadow:0 0 0 9px rgba(255,203,112,.12),0 0 32px 12px rgba(255,168,69,.32);animation:sun-path 48s linear infinite;pointer-events:none}
.moon{display:block;position:absolute;z-index:5;left:65%;top:15%;right:auto;width:40px;height:40px;background:#f8e7b0;clip-path:polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%);box-shadow:0 0 22px rgba(248,231,176,.28);opacity:0;animation:moon-path 48s linear infinite;pointer-events:none}
.hero:after{background:linear-gradient(180deg,rgba(7,12,16,.3) 0%,rgba(10,15,20,.16) 43%,rgba(12,17,18,.5) 76%,#101411 100%);animation:world-shade 48s linear infinite}
.art-caption{z-index:6}
@keyframes cycle-night{0%,11%{opacity:1}19%,74%{opacity:0}84%,100%{opacity:1}}
@keyframes cycle-dusk{0%,10%{opacity:0}16%,20%{opacity:1}27%,63%{opacity:0}70%,76%{opacity:1}83%,100%{opacity:0}}
@keyframes cycle-day{0%,20%{opacity:0}29%,60%{opacity:1}69%,100%{opacity:0}}
@keyframes cycle-stars{0%,8%{opacity:.43}12%{opacity:.7}17%,80%{opacity:0}88%{opacity:.2}94%{opacity:.62}100%{opacity:.43}}
@keyframes sun-path{
  0%{left:-8%;top:62%;opacity:0}
  10%{left:-2%;top:48%;opacity:0}
  16%{left:4%;top:39%;opacity:1}
  30%{left:21%;top:21%;opacity:1}
  48%{left:46%;top:7%;opacity:1}
  58%{left:59%;top:8%;opacity:1}
  74%{left:80%;top:25%;opacity:1}
  88%{left:98%;top:48%;opacity:0}
  100%{left:108%;top:63%;opacity:0}
}
@keyframes moon-path{
  0%{left:65%;top:15%;opacity:1}
  16%{left:83%;top:25%;opacity:1}
  24%{left:101%;top:43%;opacity:0}
  74%{left:-10%;top:44%;opacity:0}
  84%{left:4%;top:31%;opacity:.85}
  100%{left:65%;top:15%;opacity:1}
}
@keyframes world-shade{
  0%,11%{opacity:.4}
  19%,64%{opacity:.84}
  74%,100%{opacity:.42}
}
@media(max-width:650px){
  .cycle-sky{background-position:center 66%}
  .sun{width:44px;height:44px}
  .moon{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){
  .cycle-night,.cycle-dusk,.cycle-day,.hero:after,.hero-art:before,.sun,.moon{animation:none!important}
  .cycle-night{opacity:1}.cycle-dusk,.cycle-day{opacity:0}
  .sun,.moon{display:none}
}
.hero-art{background:#101a2a url("assets/abbysalmc-city-cycle.gif") center 62%/cover no-repeat}
@media(max-width:650px){.hero-art{background-position:center 66%}}
@media(prefers-reduced-motion:reduce){.hero-art{background-image:url("assets/abbysalmc-city-night.png")}}
.hero .eyebrow{width:fit-content;margin:0 auto 26px;padding:5px 9px;background:rgba(10,18,24,.2);border:0;box-shadow:none;backdrop-filter:blur(2px);font-size:12px;font-weight:700;letter-spacing:.1em;text-shadow:0 2px 4px rgba(0,0,0,.82),0 0 9px rgba(0,0,0,.32)}
@media(max-width:650px){.hero .eyebrow{max-width:100%;padding:4px 7px;font-size:10px;letter-spacing:.08em}}
.hero:after{background-image:linear-gradient(rgba(7,12,18,.22),rgba(7,12,18,.22)),linear-gradient(180deg,rgba(7,12,16,.3) 0%,rgba(10,15,20,.16) 43%,rgba(12,17,18,.5) 76%,#101411 100%)}
.hero-content .eyebrow,.hero-content h1,.hero-content h1 span,.hero-content>p,.hero-content .text-link,.server-card small,.server-card strong,.server-tag{ text-shadow:0 2px 5px rgba(0,0,0,.82),0 0 14px rgba(0,0,0,.3)}
.hero-content .eyebrow{ text-shadow:0 2px 5px rgba(0,0,0,.82),0 0 14px rgba(0,0,0,.3)}
@media(prefers-reduced-motion:reduce){
  .moon,.button-primary,.community-spark,.portal-icon,.brand-logo{animation:none!important;transition:none!important;translate:none!important}
}
@media(max-width:650px){
  .street{height:17%}
  .voxel-block{width:48px;height:42px;bottom:17%}
  .voxel-block:before{top:-18px;height:20px}
  .voxel-block:after{right:-16px;width:17px;height:52px;top:-10px}
  .block-grass{left:3%}
  .block-stone{right:3%;width:36px;height:34px}
}


/* ABBYSALMC: ripristino hero centrato e GIF a schermo intero */
.site-header{
  position:absolute!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  height:82px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 5%!important;
  background:rgba(5,12,27,.34)!important;
  border-bottom:1px solid rgba(255,255,255,.16)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  z-index:20!important;
}
.site-header .brand{position:relative!important;z-index:2!important;flex:0 0 auto!important}
.site-header .site-nav{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  width:max-content!important;
  max-width:calc(100% - 390px)!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(12px,2vw,30px)!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  z-index:2!important;
}
.site-header .nav-login{
  display:inline-flex!important;
  position:relative!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  margin:0 10px 0 auto!important;
  z-index:3!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:11px 19px!important;
  border:1px solid rgba(255,138,61,.5)!important;
  border-radius:9px!important;
  color:#111!important;
  background:linear-gradient(180deg,#ffad62,#ff7b1b)!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.hero{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
  min-height:780px!important;
  height:min(950px,100svh)!important;
  box-sizing:border-box!important;
  padding:112px 5% 55px!important;
  overflow:hidden!important;
  background:#061126!important;
}
.hero .hero-grid{display:none!important}
.hero .hero-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  z-index:0!important;
  opacity:1!important;
  background-image:url("assets/abbysalmc-city-cycle.gif")!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
}
.hero .hero-art:before,.hero .hero-art:after{pointer-events:none!important}
.hero:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(2,8,22,.40),rgba(2,8,22,.14) 45%,rgba(2,8,22,.43))!important;
}
.hero .hero-content{
  position:relative!important;
  z-index:3!important;
  width:min(100%,760px)!important;
  max-width:760px!important;
  margin:0 auto!important;
  padding:32px clamp(22px,4vw,54px) 28px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:24px!important;
  background:rgba(8,18,39,.28)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  box-shadow:0 20px 65px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.12)!important;
}
.hero .eyebrow{display:flex!important;justify-content:center!important;align-items:center!important;margin:0 auto 24px!important}
.hero h1{font-size:clamp(42px,5.5vw,72px)!important;line-height:1.04!important;letter-spacing:-.055em!important;text-align:center!important}
.hero .hero-content>p{max-width:570px!important;margin:22px auto 26px!important;text-align:center!important;color:#f1f3fa!important}
.hero .hero-actions{display:flex!important;justify-content:center!important;align-items:center!important;gap:0!important}
.hero .hero-actions .text-link{display:none!important}
.hero .server-card{
  width:min(100%,590px)!important;
  min-width:0!important;
  margin:24px auto 0!important;
  text-align:left!important;
  box-sizing:border-box!important;
  background:rgba(3,10,22,.55)!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:12px!important;
  -webkit-backdrop-filter:blur(14px)!important;
  backdrop-filter:blur(14px)!important;
}
.hero .hero-index{z-index:2!important}
@media(max-width:900px){
  .site-header{padding:0 3%!important}
  .site-header .site-nav{max-width:calc(100% - 300px)!important;gap:12px!important;font-size:11px!important}
  .site-header .nav-login{margin-right:0!important;padding:9px 13px!important}
}
@media(max-width:650px){
  .site-header{height:70px!important;padding:0 4%!important}
  .site-header .menu-toggle{display:flex!important;position:relative!important;z-index:4!important}
  .site-header .site-nav{
    position:absolute!important;left:0!important;right:0!important;top:69px!important;
    transform:none!important;width:100%!important;max-width:none!important;
    display:none!important;flex-direction:column!important;align-items:stretch!important;
    gap:0!important;padding:10px 5%!important;
    background:rgba(5,12,27,.84)!important;
    -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
  }
  .site-header .site-nav.is-open{display:flex!important}
  .site-header .nav-login{margin-left:auto!important;margin-right:12px!important;padding:8px 12px!important}
  .hero{height:auto!important;min-height:850px!important;padding:100px 4% 50px!important}
  .hero .hero-content{width:100%!important;padding:25px 16px 20px!important;border-radius:18px!important}
  .hero h1{font-size:clamp(35px,9.4vw,54px)!important;line-height:1.07!important}
  .hero .hero-content>p{font-size:13px!important;line-height:1.65!important}
  .hero .server-card{margin-top:22px!important;padding:10px!important;gap:8px!important}
}