/* Ashraf Enterprises — shared styles (v1.0) */
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/michroma-latin-400-normal.woff2") format("woff2"),url("/assets/fonts/michroma-latin-400-normal.woff") format("woff")}

/* Smooth page-to-page transition (Chrome, Edge, Safari 18.2+; others just navigate normally) */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.65s;animation-timing-function:cubic-bezier(.2,.75,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

*{box-sizing:border-box}
html,body{margin:0;background:#08080a;color:#c9ccd0;font-family:"Michroma",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:rgba(201,204,208,.28);color:#fff}
:focus-visible{outline:1px solid #9aa0a6;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- stage ---------- */
.stage{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:0 16px;overflow:hidden;background:radial-gradient(70% 55% at 50% 34%,#1f2124 0%,#0f1012 55%,#070708 100%)}
.stage-sub,.stage-404{background:radial-gradient(70% 55% at 50% 40%,#1f2124 0%,#0f1012 55%,#070708 100%)}
.light{position:absolute;inset:0;pointer-events:none;transition:opacity .9s ease}
.lights-off .light{opacity:0}
.intro .light{animation:lightsOn 1.8s ease .25s both}
@keyframes lightsOn{from{opacity:0}to{opacity:1}}
.beam{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:min(1200px,160vw);height:92%;filter:blur(70px);opacity:.175;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 40%,transparent 100%)}
.beam-shape{width:100%;height:100%;clip-path:polygon(44% 0,56% 0,88% 100%,12% 100%);
  background:linear-gradient(90deg,rgba(225,229,233,0) 0%,rgba(225,229,233,.11) 28%,rgba(236,239,242,.30) 50%,rgba(225,229,233,.11) 72%,rgba(225,229,233,0) 100%)}
.halo{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:min(900px,120vw);height:60%;
  background:radial-gradient(ellipse 30% 70% at 50% 0%,rgba(235,238,241,.09) 0%,rgba(235,238,241,.03) 55%,rgba(235,238,241,0) 80%)}
.dust{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(980px,140vw);height:80%;
  -webkit-mask-image:radial-gradient(ellipse 34% 95% at 50% 0%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 34% 95% at 50% 0%,#000 25%,transparent 80%)}
.dust circle{animation-name:drift;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes drift{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(14px,-46px);opacity:0}}
.floor{position:absolute;left:0;right:0;bottom:0;height:26%;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 18%,rgba(14,15,17,.9) 30%,#0b0b0d 100%)}
.floor-glow{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:min(1100px,130vw);height:22%;filter:blur(10px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(214,218,222,.14) 0%,rgba(214,218,222,.05) 45%,rgba(214,218,222,0) 72%)}
/* near-invisible film grain: removes banding in the dark gradients */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ---------- lockups ---------- */
.logo-btn{position:relative;z-index:1;display:block;margin:0;padding:0;background:none;border:0;color:inherit;cursor:default;-webkit-tap-highlight-color:transparent}
.logo-btn:focus{outline:none}
.logo-btn:focus-visible{outline:1px solid #9aa0a6;outline-offset:10px;border-radius:6px}
.lockup{display:block;height:auto;overflow:visible}
.lockup text{font-family:"Michroma",sans-serif}
.t-big{font-size:52px;letter-spacing:10.4px}
.t-ent{font-size:15.5px;letter-spacing:11.6px}
.t-sub{font-size:30.8px;letter-spacing:9.2px}
.lockup-home{width:clamp(240px,min(40vw,58vh),600px)}
.lockup-sub{width:clamp(200px,min(28vw,44vh),364px)}

/* ---------- home layout (spacing shrinks proportionally on short screens) ---------- */
.home{position:relative;z-index:1;flex:1;width:100%;max-width:1080px;display:flex;flex-direction:column;align-items:center}
.sp-top{flex:215 1 0;min-height:24px}
.sp-mid{flex:160 1 0;min-height:28px}
.sp-bot{flex:32 1 0;min-height:12px}
.subs{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:16px}
.subs-head{width:100%;display:flex;align-items:center;gap:20px}
.subs-head .rule{flex:1;height:1px;background:#2a2c30}
.subs-head h2{margin:0;font-weight:400;font-size:8.5px;letter-spacing:.5em;margin-right:-.5em;color:#8a8f95}
.cards{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{display:flex;justify-content:center;padding:13px 8px;border:1px solid #2a2c30;border-radius:4px;
  background-color:rgba(255,255,255,.02);transition:border-color .3s ease,background-color .3s ease,transform .3s ease,box-shadow .3s ease}
.card:hover,.card:focus-visible{border-color:#9aa0a6;background-color:rgba(255,255,255,.06);transform:translateY(-4px);outline:none;
  box-shadow:0 22px 44px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06),0 0 28px rgba(200,210,220,.08)}
.card-mark{display:flex;flex-direction:column;align-items:center;gap:6px}
.card .fam{font-size:7px;letter-spacing:.32em;margin-right:-.32em;color:#b7bbbf}
.card svg{width:40px;height:auto;overflow:visible}
.card .name{font-size:7.5px;letter-spacing:.3em;margin-right:-.3em;color:#e3e5e7;white-space:nowrap}
.card .name.capital{font-size:8px;letter-spacing:.38em;margin-right:-.38em}
.card .name.foundation{letter-spacing:.42em;margin-right:-.42em}
.band{transform:translateX(0);transition:transform 0s}
.card:hover .band,.card:focus-visible .band{transform:translateX(340px);transition:transform 2s ease-in-out}

/* ---------- subsidiary layout ---------- */
.site-header{position:relative;z-index:1;width:100%;max-width:1080px;padding:28px 0;display:flex;align-items:center}
.back{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;color:#b7bbbf;padding:8px 0;transition:color .25s ease}
.back:hover,.back:focus-visible{color:#fff;outline:none}
.back .arr{transition:transform .25s ease}
.back:hover .arr,.back:focus-visible .arr{transform:translateX(-3px)}
.badge{width:32px;height:32px;border-radius:50%;background:#0b0b0c;box-shadow:inset 0 0 0 1px #808285;display:flex;align-items:center;justify-content:center;
  transition:box-shadow .25s ease,transform .25s ease}
.badge use{transition:fill .25s ease}
.back:hover .badge,.back:focus-visible .badge{box-shadow:inset 0 0 0 1px #e3e5e7,0 0 14px rgba(220,225,230,.3);transform:scale(1.08)}
.back:hover .badge use,.back:focus-visible .badge use{fill:#d6d9dc}
.sub-main{position:relative;z-index:1;flex:1;width:100%;max-width:1080px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0 48px}

/* ---------- 404 ---------- */
.nf-main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 0}
.nf-mark{width:120px;height:auto}
.nf-title{margin:0;font-weight:400;font-size:10px;letter-spacing:.5em;margin-right:-.5em;color:#6f747a}
.nf-home{font-size:10px;letter-spacing:.4em;margin-right:-.4em;color:#b7bbbf;padding:12px 4px;border-bottom:1px solid #2a2c30;transition:color .25s ease,border-color .25s ease}
.nf-home:hover,.nf-home:focus-visible{color:#fff;border-color:#9aa0a6;outline:none}

/* ---------- footer ---------- */
.site-footer{position:relative;z-index:1;width:100%;max-width:1080px;padding:8px 0 40px;display:flex;flex-direction:column;align-items:center;gap:12px}
.social-row{display:flex;gap:8px}
.social{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#c9ccd0;transition:color .2s ease,background-color .2s ease}
.social:hover,.social:focus-visible{color:#fff;background-color:rgba(255,255,255,.07);outline:none}
.copyright{margin:0;font-size:10px;letter-spacing:.3em;margin-right:-.3em;color:#55595e;text-align:center;line-height:1.6}

/* ---------- short screens: everything fits without scrolling ---------- */
@media (max-height:820px){
  .site-footer{padding:4px 0 24px;gap:8px}
  .site-header{padding:18px 0}
  .sub-main{padding:12px 0 24px}
}
@media (max-height:640px){
  .subs{gap:10px}
  .card{padding:9px 6px}
  .card-mark{gap:4px}
  .card svg{width:32px}
  .site-footer{padding:2px 0 14px;gap:4px}
  .social{width:40px;height:40px}
  .site-header{padding:10px 0}
}

/* ---------- phones ---------- */
@media (max-width:480px){
  .cards{gap:8px}
  .card{padding:12px 4px}
  .card .name,.card .name.capital,.card .name.foundation{letter-spacing:.14em;margin-right:-.14em}
  .card .fam{letter-spacing:.24em;margin-right:-.24em}
  .back{font-size:10px;letter-spacing:.22em;gap:10px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .sweep,.band{display:none}
  .dust circle{animation:none}
  .intro .light{animation:none}
  .card,.light,.badge,.back,.back .arr{transition:none}
  .card:hover,.card:focus-visible{transform:none}
}