/* =====================================================
   ESKAY ENTERPRISES — Coming Soon
   Styles for sk/index.html
   ===================================================== */

/* ---------- design tokens ---------- */
:root{
  --ink:       #0B1320;
  --ink-deep:  #060A12;
  --grid-line: rgba(110,126,150,.10);
  --paper:     #EDEFF3;
  --steel:     #6E7E96;
  --signal:    #FF6B35;
  --logo-pad:   clamp(14px, 3vw, 30px);
  --logo-final: clamp(72px, 12vw, 96px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

img, video{
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* ---------- BG video ---------- */
.bg-video{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.46;
  filter:saturate(.85) brightness(.75);
  pointer-events:none;
}

/* ---------- backdrop ---------- */
.backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(11,19,32,0) 0%, var(--ink-deep) 100%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:100% 100%, 48px 48px, 48px 48px;
}

/* ---------- logo — travels top-left ---------- */
.logo-mark{
  position:fixed;
  top:  calc(var(--logo-pad) + var(--logo-final)/2);
  left: calc(var(--logo-pad) + var(--logo-final)/2);
  z-index:10;
  width:var(--logo-final);
  transform:translate(-50%,-50%);
  animation:logoSequence 2.8s cubic-bezier(.55,0,.2,1) forwards;
}
.logo-mark img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 0 0 rgba(80,170,255,0));
  animation:logoGlowShape 2.8s linear forwards;
}

@keyframes logoGlowShape{
  0%   { filter:drop-shadow(0 0 0px  rgba(80,170,255,0)); }
  38%  { filter:drop-shadow(0 0 0px  rgba(80,170,255,0)); }
  44%  { filter:drop-shadow(0 0 10px rgba(110,190,255,.80))
                drop-shadow(0 0 22px rgba(80,160,255,.40)); }
  62%  { filter:drop-shadow(0 0 14px rgba(110,190,255,.90))
                drop-shadow(0 0 32px rgba(80,160,255,.50)); }
  88%  { filter:drop-shadow(0 0 6px  rgba(110,190,255,.45))
                drop-shadow(0 0 14px rgba(80,160,255,.22)); }
  100% { filter:drop-shadow(0 0 0px  rgba(80,170,255,0)); }
}

@keyframes logoSequence{
  0%   { opacity:0; top:50%; left:50%; width:clamp(146px,34vw,226px);
         transform:translate(-50%,-50%) scale(.92); }
  14%  { opacity:1; top:50%; left:50%; width:clamp(170px,38vw,260px);
         transform:translate(-50%,-50%) scale(1); }
  32%  { opacity:1; top:50%; left:50%; width:clamp(200px,44vw,310px);
         transform:translate(-50%,-50%) scale(1.08); }
  38%  { opacity:1; top:50%; left:50%; width:clamp(200px,44vw,310px);
         transform:translate(-50%,-50%) scale(1.08); }
  100% { opacity:1;
         top:  calc(var(--logo-pad) + var(--logo-final)/2);
         left: calc(var(--logo-pad) + var(--logo-final)/2);
         width:var(--logo-final);
         transform:translate(-50%,-50%) scale(1); }
}

/* ---------- centre layout wrapper ---------- */
.centre-wrap{
  position:fixed; inset:0; z-index:6;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:0;
  pointer-events:none;
}

/* ---------- copy ---------- */
.copy{
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:10px; padding:0 24px;
  pointer-events:none;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:clamp(10px,1.6vw,16px);
  letter-spacing:.18em; text-transform:uppercase; color:var(--signal);
  opacity:0; transform:translateY(14px);
  animation:fadeSlideUp .7s ease 1.9s both;
}

/* ---------- company name + electric canvas ---------- */
.company-wrap{
  position:relative;
  display:inline-block;
}
#electricCanvas{
  position:absolute;
  top:-20px; left:-24px;
  width:calc(100% + 48px); height:calc(100% + 40px);
  pointer-events:none;
  z-index:5;
}
.company-name{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(36px,6.5vw,78px);
  letter-spacing:0.05em; text-transform:uppercase;
  margin:0; line-height:1.1;

  /* gradient clipped to text: white → orange → soft peach → white */
  background: linear-gradient(90deg,
    var(--paper)  20%,
    var(--signal) 42%,
    #FFB89A       54%,
    var(--paper)  68%
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  opacity:0;
  animation:
    companyReveal 1.4s cubic-bezier(.16,1,.3,1) 2.05s            both,
    shimmer       4.5s ease-in-out              3.5s  infinite,
    glowPulse     2.6s ease-in-out              3.5s  infinite;
}

@keyframes companyReveal{
  0%  { opacity:0; letter-spacing:-0.02em; filter:blur(10px); transform:scale(.97); }
  65% { opacity:1; letter-spacing:0.08em;  filter:blur(0px);  transform:scale(1.01); }
  100%{ opacity:1; letter-spacing:0.05em;  filter:blur(0px);  transform:scale(1); }
}
@keyframes shimmer{
  0%   { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@keyframes glowPulse{
  0%,100%{ filter:drop-shadow(0 0  5px rgba(255,107,53,.18)); }
  50%    { filter:drop-shadow(0 0 20px rgba(255,107,53,.72))
                  drop-shadow(0 0 40px rgba(255,107,53,.28)); }
}

.headline{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(18px,3vw,32px); color:rgba(237,239,243,.75);
  max-width:700px; line-height:1.2; margin:0;
  opacity:0; transform:translateY(14px);
  animation:fadeSlideUp .7s ease 3.0s both;
}
.subtext{
  font-family:'Inter',sans-serif; font-size:clamp(13px,1.6vw,15px);
  color:var(--steel); max-width:480px; margin:0;
  opacity:0; transform:translateY(14px);
  animation:fadeSlideUp .7s ease 3.15s both;
}
@keyframes fadeSlideUp{
  0%  { opacity:0; transform:translateY(14px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* ---------- gap between copy and gallery ---------- */
.copy-gap{ height:clamp(10px,1.5vh,20px); flex-shrink:0; }

/* ---------- 3D gallery stage ---------- */
.gallery-stage{
  position:relative;
  left:0; top:0;
  width:min(98vw,1400px);
  height:clamp(260px,38vw,440px);
  perspective:2600px;
  flex-shrink:0;
  pointer-events:auto;
  opacity:0;
  animation:galleryFadeIn .8s ease 2.35s both;
}
@keyframes galleryFadeIn{
  0%  { opacity:0; transform:translateY(24px); }
  100%{ opacity:1; transform:translateY(0); }
}

.gallery{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  display:flex; align-items:center; justify-content:center;
}

/* card */
.gallery-item{
  position:absolute;
  left:50%; top:50%;
  width: clamp(300px, 52vw, 560px);
  height:clamp(210px, 36vw, 390px);
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  transform-style:preserve-3d;
  transform:
    translate(-50%,-50%)
    translateX(var(--tx,0px))
    translateY(var(--ty,0px))
    translateZ(var(--tz,0px))
    rotateY(var(--ry,0deg))
    scale(var(--sc,1));
  opacity:var(--op,1);
  z-index:var(--zi,1);
  filter:blur(var(--bl,0px)) brightness(var(--br,1));
  transition:
    transform  1s cubic-bezier(.65,0,.35,1),
    opacity    1s cubic-bezier(.65,0,.35,1),
    filter     1s ease,
    box-shadow .4s ease;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.gallery-item:hover{ filter:blur(var(--bl,0px)) brightness(1.12) !important; }
.gallery-item.is-center{
  cursor:default;
  opacity:1 !important;
  filter:none !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16);
}
.gallery-item.is-center:hover{ filter:none !important; }

.gallery-item .layer{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s cubic-bezier(.4,0,.2,1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.gallery-item .layer.is-front{
  opacity:1; z-index:2;
  filter: contrast(1.12) saturate(1.10);
}

/* floor reflection */
.gallery-reflection{
  position:absolute; top:100%; left:0;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transform:scaleY(-1);
  transform-origin:top center;
  opacity:.28;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%);
  pointer-events:none;
}
.gallery-reflection .gallery{ position:absolute; inset:0; }
.gallery-reflection .gallery-item{ cursor:default; }
.gallery-reflection .gallery-item:hover{ filter:none !important; }

/* nav arrows */
.gallery-nav{
  position:absolute; top:44%; z-index:20;
  transform:translateY(-50%);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  color:#fff; width:42px; height:42px;
  border-radius:50%; font-size:22px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
  user-select:none; font-family:sans-serif;
}
.gallery-nav:hover{ background:rgba(255,255,255,.18); }
.gallery-nav.prev{ left:-56px; }
.gallery-nav.next{ right:-56px; }

/* dots */
.gallery-dots{
  position:absolute;
  bottom:-20px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:8px; z-index:20;
}
.gallery-dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.22);
  cursor:pointer;
  transition:background .3s,transform .3s;
}
.gallery-dot.active{ background:#fff; transform:scale(1.5); }

/* ---------- footer ---------- */
.site-footer{
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  padding:12px 24px;
  display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:wrap;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:400;
  letter-spacing:.02em;
  color:rgba(237,239,243,.48);
  border-top:1px solid rgba(110,126,150,.12);
  opacity:0;
  animation:fadeSlideUp .7s ease 3.4s both;
}
.site-footer a{ color:rgba(237,239,243,.72); text-decoration:none; transition:color .2s; }
.site-footer a:hover{ color:#fff; }
.site-footer .sep{ color:rgba(110,126,150,.4); }

/* ---------- responsive — narrow portrait (≤680px) ---------- */
@media(max-width:680px){
  /* Clip any residual overflow — canvas extends ±24px outside company-wrap
     but is contained within copy, so hidden is safe here */
  .copy{ overflow-x:hidden; }

  /* Fit "ESKAY ENTERPRISES" on screens from 360px upward.
     6.5vw gives ~23px at 360px, ~25px at 390px, ~28px at 430px — all safe. */
  .company-name{
    font-size:    clamp(18px, 6.5vw, 36px);
    letter-spacing: 0.02em;
  }
  /* Tighten the reveal animation's peak letter-spacing to stay in bounds */
  @keyframes companyReveal{
    0%  { opacity:0; letter-spacing:-0.01em; filter:blur(8px);  transform:scale(.97); }
    65% { opacity:1; letter-spacing:0.03em;  filter:blur(0px);  transform:scale(1.01); }
    100%{ opacity:1; letter-spacing:0.02em;  filter:blur(0px);  transform:scale(1); }
  }

  .eyebrow{ font-size:clamp(9px,2.8vw,13px); }
  .headline{ font-size:clamp(15px,4.2vw,20px); }
  .subtext{  font-size:clamp(11px,3vw,14px); }

  .gallery-stage{ height:clamp(190px,50vw,260px); }
  .gallery-item{
    width: clamp(220px, 60vw, 300px);
    height:clamp(154px, 42vw, 210px);
  }
  .gallery-nav{ width:36px; height:36px; font-size:20px; }
  .gallery-nav.prev{ left:-40px; }
  .gallery-nav.next{ right:-40px; }
  .site-footer{ font-size:10px; padding:8px 12px; }
}

/* ---------- responsive — very narrow (≤400px) ---------- */
@media(max-width:400px){
  .gallery-nav.prev{ left:-28px; }
  .gallery-nav.next{ right:-28px; }
}

/* ---------- responsive — landscape / short viewport ---------- */
@media(max-height:480px){
  :root{
    --logo-pad:   8px;
    --logo-final: clamp(34px, 8vh, 48px);
  }
  /* Push content below logo and above footer */
  .centre-wrap{
    padding-top:    clamp(42px, 11vh, 58px);
    padding-bottom: 30px;
  }
  .copy{ gap:3px; padding:0 16px; }
  .eyebrow{ font-size:9px; letter-spacing:.10em; }
  .company-name{
    font-size:clamp(18px,5vh,30px);
    letter-spacing:0.02em;
  }
  @keyframes companyReveal{
    0%  { opacity:0; letter-spacing:-0.01em; filter:blur(6px);  transform:scale(.97); }
    65% { opacity:1; letter-spacing:0.03em;  filter:blur(0px);  transform:scale(1.01); }
    100%{ opacity:1; letter-spacing:0.02em;  filter:blur(0px);  transform:scale(1); }
  }
  .headline{ font-size:clamp(10px,2vh,14px); }
  .subtext{ display:none; }
  .copy-gap{ height:4px; }
  .gallery-stage{ height:clamp(120px,26vh,168px); }
  .gallery-item{
    width: clamp(140px,24vh,185px);
    height:clamp( 98px,17vh,130px);
  }
  .gallery-nav{ width:28px; height:28px; font-size:14px; }
  .gallery-nav.prev{ left:-30px; }
  .gallery-nav.next{ right:-30px; }
  .gallery-dots{ bottom:-16px; }
  .site-footer{ font-size:9px; padding:4px 10px; }
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .logo-mark,.logo-mark img,
  .eyebrow,.company-name,.headline,.subtext,
  .gallery-stage,.site-footer{ animation:none !important; }
  .logo-mark{
    top:calc(var(--logo-pad)+var(--logo-final)/2);
    left:calc(var(--logo-pad)+var(--logo-final)/2);
    width:var(--logo-final); transform:translate(-50%,-50%); opacity:1;
  }
  .logo-mark img{ filter:none; }
  .eyebrow,.company-name,.headline,.subtext,.gallery-stage,.site-footer{ opacity:1; transform:none; }
  .company-name{
    background-position: 42% 50%;
    filter: drop-shadow(0 0 14px rgba(255,107,53,.55));
  }
  .gallery-item{ transition:none !important; }
  .gallery-item .layer{ transition:none !important; }
}