/* ViralViz homepage — concept 11, refined portal direction. */

.site-header {
  height:82px;
  border-bottom-color:rgba(255,255,255,.105);
  background:linear-gradient(180deg,rgba(3,4,7,.82),rgba(3,4,7,.42));
  backdrop-filter:blur(18px) saturate(1.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.16);
}

.portal-hero.hero {
  --portal-tilt-x:0deg;
  --portal-tilt-y:0deg;
  --portal-shift-x:0px;
  --portal-shift-y:0px;
  position:relative;
  height:max(760px,100svh);
  min-height:760px;
  display:block;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 28% 50%,rgba(87,216,255,.105),transparent 19%),
    radial-gradient(circle at 30% 51%,rgba(166,156,255,.08),transparent 34%),
    radial-gradient(ellipse at 78% 44%,rgba(255,255,255,.025),transparent 37%),
    #030407;
}

.portal-hero.hero::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:82px 0 0;
  pointer-events:none;
  background:linear-gradient(104deg,transparent 0 61%,rgba(255,255,255,.018) 61% 61.08%,transparent 61.08%);
}

.portal-hero.hero::after { content:none; }

.portal-grid {
  position:absolute;
  z-index:0;
  inset:82px 0 0;
  opacity:.33;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.72) 52%,transparent 92%),linear-gradient(to bottom,#000 0,transparent 96%);
  mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.72) 52%,transparent 92%),linear-gradient(to bottom,#000 0,transparent 96%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

.portal-field {
  position:absolute;
  z-index:1;
  left:clamp(-50px,1.6vw,32px);
  top:50%;
  width:min(51vw,750px);
  aspect-ratio:1;
  translate:0 -47%;
  transform:translate3d(var(--portal-shift-x),var(--portal-shift-y),0) rotateX(var(--portal-tilt-x)) rotateY(var(--portal-tilt-y));
  transform-style:preserve-3d;
  pointer-events:none;
  transition:transform .65s cubic-bezier(.16,1,.3,1);
}

.portal-field::before,
.portal-field::after {
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.portal-field::before {
  inset:5%;
  background:radial-gradient(circle,transparent 44%,rgba(87,216,255,.026) 63%,transparent 72%);
  box-shadow:inset 0 0 90px rgba(87,216,255,.032),0 0 90px rgba(87,216,255,.025);
}

.portal-field::after {
  inset:20%;
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 0 0 22px rgba(255,255,255,.008),0 0 70px rgba(166,156,255,.04);
}

.portal-ring {
  position:absolute;
  display:block;
  border-radius:50%;
  border:1px solid;
  will-change:transform,opacity;
}

.portal-ring-outer {
  inset:3%;
  border-color:rgba(87,216,255,.23);
  box-shadow:inset 0 0 54px rgba(87,216,255,.024),0 0 46px rgba(87,216,255,.035);
  animation:portal-breathe 8s ease-in-out infinite;
}

.portal-ring-inner {
  inset:14%;
  border-color:rgba(166,156,255,.21);
  animation:portal-breathe 8s 1.1s ease-in-out infinite reverse;
}

.portal-axis {
  position:absolute;
  display:block;
  opacity:.42;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
}
.portal-axis-horizontal { top:50%; left:0; width:100%; height:1px; }
.portal-axis-vertical { top:0; left:50%; width:1px; height:100%; background:linear-gradient(transparent,rgba(255,255,255,.1),transparent); }
.portal-node { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 5px rgba(217,255,87,.045),0 0 14px rgba(217,255,87,.64); }
.portal-node-b { right:12%; bottom:20%; background:var(--cyan); box-shadow:0 0 0 5px rgba(87,216,255,.04),0 0 14px rgba(87,216,255,.5); }

.portal-stage {
  --portal-side-offset:232px;
  position:absolute;
  z-index:4;
  left:clamp(-28px,1.8vw,36px);
  top:50%;
  width:min(52vw,780px);
  height:min(76vh,690px);
  translate:0 -45%;
  perspective:1200px;
  transform-style:preserve-3d;
  transform:translate3d(var(--portal-shift-x),var(--portal-shift-y),0) rotateX(var(--portal-tilt-x)) rotateY(var(--portal-tilt-y));
  transition:transform .65s cubic-bezier(.16,1,.3,1);
}

.portal-card {
  position:absolute;
  left:50%;
  top:2%;
  width:clamp(230px,20vw,307px);
  transform-style:preserve-3d;
  filter:drop-shadow(0 34px 50px rgba(0,0,0,.58));
  cursor:pointer;
  transition:filter .62s var(--ease-snap),opacity .62s var(--ease-snap),transform .76s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

.portal-card[data-position="left"] {
  z-index:1;
  opacity:.48;
  transform:translate3d(calc(-50% - var(--portal-side-offset)),16%,0) rotateY(13deg) rotateZ(-1.4deg) scale(.86);
  transform-origin:right center;
}

.portal-card[data-position="center"] {
  z-index:3;
  opacity:1;
  cursor:default;
  transform:translate3d(-50%,0,78px) rotateY(0) rotateZ(0) scale(1);
}

.portal-card[data-position="right"] {
  z-index:1;
  opacity:.48;
  transform:translate3d(calc(-50% + var(--portal-side-offset)),16%,0) rotateY(-13deg) rotateZ(1.4deg) scale(.86);
  transform-origin:left center;
}

.portal-card[data-position="left"]:hover,.portal-card[data-position="right"]:hover { opacity:.67; filter:drop-shadow(0 39px 56px rgba(0,0,0,.64)); }
.portal-card:focus-visible { outline:1px solid rgba(217,255,87,.75); outline-offset:7px; }

.portal-frame {
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  border-radius:clamp(18px,1.6vw,25px);
  background:#050609;
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.portal-card[data-position="center"] .portal-frame { border-color:rgba(255,255,255,.32); box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 0 1px rgba(87,216,255,.025); }
.portal-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#050609; pointer-events:none; }
.portal-vignette { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.43),transparent 23%,transparent 58%,rgba(0,0,0,.84)); box-shadow:inset 0 0 48px rgba(0,0,0,.17); }
.portal-frame::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); }

.portal-appbar {
  position:absolute;
  z-index:5;
  top:13px;
  right:13px;
  left:13px;
  min-height:22px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-shadow:0 1px 5px #000;
}
.portal-appbar svg { width:17px; height:17px; flex:0 0 17px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.portal-appbar-tiktok { justify-content:space-between; }
.portal-appbar .portal-tiktok-logo { display:block; width:32px; height:32px; max-width:none; flex:0 0 32px; object-fit:contain; border-radius:7px; }
.portal-appbar-tiktok nav { position:absolute; left:50%; display:flex; align-items:center; gap:13px; transform:translateX(-50%); white-space:nowrap; }
.portal-appbar-tiktok nav span,.portal-appbar-tiktok nav strong { font:700 8px/1 Arial,sans-serif; }
.portal-appbar-tiktok nav span { color:rgba(255,255,255,.7); }
.portal-appbar-tiktok nav strong { position:relative; font-weight:800; }
.portal-appbar-tiktok nav strong::after { content:""; position:absolute; right:15%; bottom:-6px; left:15%; height:2px; border-radius:2px; background:#fff; }
.portal-shorts-brand,.portal-appbar-tools { display:flex; align-items:center; }
.portal-shorts-brand { gap:6px; }
.portal-shorts-brand svg { width:16px; height:16px; fill:#ff0033; stroke:none; }
.portal-shorts-brand strong { font:800 9px/1 Arial,sans-serif; letter-spacing:-.03em; }
.portal-appbar-tools { margin-left:auto; gap:10px; }
.portal-appbar-tools svg { width:15px; height:15px; }
.portal-appbar-tools svg:last-child { fill:#fff; stroke:none; }
.portal-instagram-brand { display:flex; align-items:center; gap:6px; }
.portal-instagram-brand img { display:block; width:20px; height:20px; max-width:none; flex:0 0 20px; object-fit:contain; }
.portal-appbar-reels strong { font:800 11px/1 Arial,sans-serif; letter-spacing:-.035em; }
.portal-appbar-reels .portal-chevron { width:13px; height:13px; }
.portal-appbar-reels .portal-camera { width:18px; height:18px; margin-left:auto; }
/* Inactive previews expose their platform at the outer edge of the carousel.
   The full app header returns when the card is brought to the centre. */
.portal-appbar> :is(.portal-tiktok-logo,.portal-instagram-brand,.portal-shorts-brand) {
  position:relative;
  left:0;
  transform:translateX(0);
  transition:left .76s cubic-bezier(.16,1,.3,1),transform .76s cubic-bezier(.16,1,.3,1);
}
.portal-card:not([data-position="center"]) .portal-appbar> :not(.portal-tiktok-logo):not(.portal-instagram-brand):not(.portal-shorts-brand) { display:none; }
.portal-card:not([data-position="center"]) .portal-appbar { justify-content:flex-start; }
.portal-card[data-position="right"] .portal-appbar> :is(.portal-tiktok-logo,.portal-instagram-brand,.portal-shorts-brand) { left:100%; transform:translateX(-100%); }
.portal-social-actions { position:absolute; z-index:4; right:10px; bottom:57px; width:31px; display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.portal-action { display:grid; justify-items:center; gap:2px; }
.portal-action svg { width:21px; height:21px; overflow:visible; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.portal-social-tiktok .portal-action svg { fill:#fff; stroke:#fff; stroke-width:1.2; }
.portal-social-tiktok .portal-action:nth-of-type(2) svg { fill:#fff; }
.portal-action small { color:#fff; font:700 5px/1 Arial,sans-serif; letter-spacing:-.01em; }
.portal-avatar { position:relative; width:27px; height:27px; display:grid; place-items:center; border:1.5px solid #fff; border-radius:50%; background:#101116; color:var(--acid); font:800 6px/1 Arial,sans-serif; }
.portal-avatar i { position:absolute; right:-2px; bottom:-3px; width:12px; height:12px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#fe2c55; font:700 9px/1 Arial,sans-serif; }
.portal-disc,.portal-reels-audio { width:27px; height:27px; display:grid; place-items:center; border:3px solid rgba(255,255,255,.5); border-radius:50%; background:repeating-radial-gradient(circle,#1b1c22 0 3px,#050609 4px 6px); }
.portal-disc i,.portal-reels-audio i { color:var(--acid); font:800 5px/1 Arial,sans-serif; }
.portal-disc { animation:portal-disc-spin 4s linear infinite; }
.portal-social-shorts { gap:12px; }
.portal-social-shorts .portal-action { width:29px; min-height:29px; padding:4px 2px; border-radius:999px; background:rgba(18,18,18,.56); }
.portal-social-shorts .portal-action svg { width:19px; height:19px; }
.portal-social-shorts .portal-shorts-heart svg { fill:#fff; stroke-width:1.1; }
.portal-social-shorts .portal-remix svg { stroke-width:1.7; }
.portal-social-reels { bottom:61px; gap:12px; }
.portal-social-reels .portal-action svg { width:22px; height:22px; stroke-width:1.7; }
.portal-social-reels .portal-more svg { fill:#fff; stroke:none; }
.portal-reels-audio { border-radius:7px; border-width:1.5px; animation:none; }
.portal-caption { position:absolute; z-index:3; right:45px; bottom:22px; left:13px; display:grid; gap:4px; color:#fff; font-family:Arial,sans-serif; text-shadow:0 1px 5px #000; }
.portal-caption>strong { font-size:8px; }
.portal-caption>span { font-size:6.5px; line-height:1.35; }
.portal-caption>span>b,.portal-caption>span>strong { color:#fff; font-size:inherit; }
.portal-caption>em { overflow:hidden; color:rgba(255,255,255,.9); font-size:5.5px; font-style:normal; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.portal-channel { display:flex; align-items:center; gap:5px; }
.portal-channel>i { width:17px; height:17px; display:grid; flex:0 0 17px; place-items:center; border:1px solid rgba(255,255,255,.85); border-radius:50%; background:#111318; color:var(--acid); font:800 5px/1 Arial,sans-serif; }
.portal-channel>strong { font-size:7px; }
.portal-channel>b { padding:4px 6px; border:1px solid rgba(255,255,255,.85); border-radius:4px; font-size:5.5px; font-weight:700; }
.portal-caption-shorts .portal-channel>b { border:0; background:#fff; color:#111; text-shadow:none; }
.portal-caption-reels .portal-channel>b { border:0; padding-inline:2px; }
.portal-timeline {
  --timeline-progress:50%;
  position:absolute;
  z-index:8;
  right:9px;
  bottom:0;
  left:9px;
  height:28px;
  cursor:ew-resize;
  touch-action:none;
}
.portal-card:not([data-position="center"]) .portal-timeline { pointer-events:none; }
.portal-timeline input { position:absolute; z-index:3; inset:0; width:100%; height:100%; margin:0; opacity:.001; cursor:ew-resize; }
.portal-timeline-track { position:absolute; right:0; bottom:7px; left:0; height:2px; overflow:visible; background:rgba(255,255,255,.25); transition:height .22s ease,background .22s ease; }
.portal-timeline-track i { position:absolute; inset:0 auto 0 0; width:var(--timeline-progress); background:#fff; box-shadow:0 0 8px rgba(255,255,255,.18); }
.portal-timeline-track b { position:absolute; top:50%; left:var(--timeline-progress); width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.13),0 0 9px rgba(255,255,255,.25); opacity:0; transform:translate(-50%,-50%) scale(.72); transition:opacity .18s ease,transform .24s cubic-bezier(.16,1,.3,1); }
.portal-time { position:absolute; right:0; bottom:12px; display:flex; gap:3px; color:rgba(255,255,255,.55); font:700 5px/1 var(--mono); letter-spacing:.06em; opacity:0; transform:translateY(2px); transition:opacity .2s ease,transform .25s ease; }
.portal-time b { color:#fff; font-weight:700; }
.portal-time i { color:rgba(255,255,255,.28); font-style:normal; }
.portal-card[data-position="center"] .portal-timeline:is(:hover,:focus-within) .portal-timeline-track { height:3px; background:rgba(255,255,255,.32); }
.portal-card[data-position="center"] .portal-timeline:is(:hover,:focus-within) .portal-timeline-track b,
.portal-card[data-position="center"] .portal-timeline:is(:hover,:focus-within) .portal-time { opacity:1; transform:translate(-50%,-50%) scale(1); }
.portal-card[data-position="center"] .portal-timeline:is(:hover,:focus-within) .portal-time { transform:translateY(0); }
.portal-timeline input:focus-visible + .portal-timeline-track { outline:1px solid rgba(217,255,87,.8); outline-offset:4px; }
@keyframes portal-disc-spin { to { transform:rotate(360deg); } }

.portal-copy {
  position:absolute;
  z-index:6;
  top:50%;
  right:clamp(32px,4.2vw,72px);
  width:min(42vw,610px);
  translate:0 -43%;
}

.portal-copy h1 {
  max-width:600px;
  margin:23px 0 23px;
  color:#f4f2ec;
  font-size:clamp(55px,5.2vw,86px);
  font-weight:750;
  line-height:.91;
  letter-spacing:-.071em;
  text-wrap:balance;
}
.portal-copy h1 em { display:block; color:var(--cyan); font:400 .91em/.98 Georgia,"Times New Roman",serif; letter-spacing:-.068em; }
.portal-copy>p { max-width:510px; margin:0; color:#92959e; font-size:clamp(13px,1.04vw,16px); line-height:1.66; }
.portal-mobile-scenes { display:none; }
@keyframes portal-breathe {
  0%,100% { opacity:.72; transform:scale(1); }
  50% { opacity:1; transform:scale(1.013); }
}

@media (max-width:1180px) {
  .portal-field { left:-88px; width:680px; }
  .portal-stage { left:-75px; width:710px; }
  .portal-copy { right:30px; width:45vw; }
  .portal-copy h1 { font-size:clamp(52px,5.5vw,72px); }
  .portal-stage { --portal-side-offset:210px; }
  .portal-card { width:272px; }
}

@media (max-width:1040px) {
  .portal-hero.hero { height:1080px; min-height:100svh; }
  .portal-hero.hero::before,.portal-grid { inset:82px 0 0; }
  .portal-copy { top:126px; right:28px; left:28px; width:auto; translate:0; }
  .portal-copy h1 { max-width:760px; margin:18px 0; font-size:clamp(48px,8.5vw,70px); }
  .portal-copy h1 em { display:inline; }
  .portal-copy>p { max-width:680px; }
  .portal-field { top:72%; left:50%; width:720px; translate:-50% -50%; }
  .portal-stage { top:72%; left:50%; width:720px; height:570px; translate:-50% -50%; }
  .portal-stage { --portal-side-offset:210px; }
  .portal-card { width:268px; }
}

@media (max-width:760px) {
  .site-header { height:72px; padding-inline:18px; }
  .portal-hero.hero { height:930px; min-height:930px; }
  .portal-hero.hero::before,.portal-grid { inset:72px 0 0; }
  .portal-copy { top:103px; right:18px; left:18px; }
  .portal-copy h1 { max-width:560px; margin:16px 0; font-size:clamp(41px,12.2vw,59px); line-height:.93; }
  .portal-copy h1 em { display:block; }
  .portal-copy>p { font-size:12px; line-height:1.57; }
  .portal-field { top:72%; width:610px; }
  .portal-stage { top:72%; width:600px; height:455px; }
  .portal-stage { --portal-side-offset:165px; }
  .portal-card { width:213px; top:0; }
  .portal-appbar { top:10px; right:10px; left:10px; }
  .portal-caption { right:10px; bottom:17px; left:10px; }
  .portal-social-actions { right:8px; bottom:49px; transform:scale(.82); transform-origin:right bottom; }
  .portal-caption { right:38px; }
}

@media (max-width:520px) {
  .portal-hero.hero { height:clamp(740px,100svh,900px); min-height:740px; }
  .portal-copy { top:94px; }
  .portal-copy h1 { font-size:clamp(39px,12.6vw,54px); }
  .portal-copy>p { max-width:430px; }
  .portal-field { top:67%; width:560px; }
  .portal-stage { top:67%; width:555px; height:420px; }
  .portal-stage { --portal-side-offset:clamp(64px,calc((100vw - 190px)/2),154px); }
  .portal-card { width:198px; }
  .portal-mobile-scenes {
    position:absolute;
    right:18px;
    bottom:max(18px,env(safe-area-inset-bottom,0px));
    left:18px;
    z-index:8;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    max-width:330px;
    margin-inline:auto;
    padding:4px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:rgba(13,15,21,.84);
    box-shadow:0 12px 38px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
  }
  .portal-mobile-scenes button {
    min-height:44px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:rgba(237,239,244,.58);
    font:700 11px/1 Manrope,sans-serif;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s ease,color .2s ease,box-shadow .2s ease;
  }
  .portal-mobile-scenes button.is-active {
    background:rgba(217,255,87,.11);
    color:#d9ff57;
    box-shadow:inset 0 0 0 1px rgba(217,255,87,.24);
  }
  .portal-mobile-scenes button:focus-visible { outline:2px solid #d9ff57; outline-offset:2px; }
}

@media (max-width:390px) {
  .portal-copy h1 { font-size:40px; }
  .portal-copy>p { font-size:11px; }
  .portal-stage { width:515px; }
  .portal-stage { --portal-side-offset:clamp(64px,calc((100vw - 175px)/2),143px); }
  .portal-field { width:520px; }
  .portal-card { width:183px; }
  .portal-field,.portal-stage { top:68%; }
}

@media (max-width:360px) {
  .portal-card:not([data-position="center"]) .portal-appbar strong { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .portal-ring,.portal-disc { animation:none!important; }
  .portal-field,.portal-stage,.portal-card { transition-duration:.01ms!important; }
  .portal-appbar> :is(.portal-tiktok-logo,.portal-instagram-brand,.portal-shorts-brand) { transition:none; }
  .portal-mobile-scenes button { transition:none; }
}