/* ═══ Animaker Cloud on qol.one (/animaker) ═══
   QOL chrome (brand.css + product-intro.css) with Animaker's manga proof-sheet voice laid over it:
   Dela Gothic One display type, speed lines, halftone, a tilted panel with a hard cobalt offset,
   a speech bubble and the genre marquee. Surfaces stay QOL glass; motion is cubic-bezier(.16,1,.3,1)
   with a 2px lift. Mobile, tablet and desktop are three separate layouts. */
.am{--disp:'Dela Gothic One','Arial Black',Impact,sans-serif;--ink:#101116;--paper:#f3f1ec}
.am .disp{font-family:var(--disp);font-weight:400}

/* ── hero ── */
.am-hero{position:relative;isolation:isolate;padding:150px 0 96px;overflow:hidden}
.am-hero .speed{position:absolute;inset:-20%;z-index:-2;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 72% 46%,rgba(120,160,255,.17) 0deg .7deg,transparent .7deg 5.5deg);
  -webkit-mask-image:radial-gradient(circle at 72% 46%,transparent 14%,#000 62%,transparent 92%);
  mask-image:radial-gradient(circle at 72% 46%,transparent 14%,#000 62%,transparent 92%)}
.am-hero .dots{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(150,185,255,.2) 1.1px,transparent 1.6px);background-size:9px 9px;
  -webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 55%);mask-image:linear-gradient(115deg,#000 0%,transparent 55%)}
.am-hero .glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 52% at 72% 46%,color-mix(in srgb,var(--ac) 26%,transparent),transparent 72%)}
.am-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.am-copy{text-align:left}
.am-lock{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.am-lock img{width:56px;height:56px;filter:drop-shadow(0 8px 22px color-mix(in srgb,var(--ac) 55%,transparent))}
.am-lock span{font-family:var(--disp);font-size:clamp(17px,1.6vw,21px);letter-spacing:.02em;color:#fff}
.am-lock span em{font-style:normal;color:var(--ac-hi)}
.am h1{font-family:var(--disp);font-weight:400;font-size:clamp(38px,4.2vw,62px);line-height:1.02;letter-spacing:-.015em;margin:20px 0 0;
  max-width:none;color:#fff;background:none;-webkit-text-fill-color:#fff;text-wrap:balance}
.am h1 .l2{display:block;margin-top:.08em;color:transparent;-webkit-text-stroke:2px var(--ac-hi);-webkit-text-fill-color:transparent}
.am-dek{margin:26px 0 0;max-width:540px;font-size:clamp(16.5px,1.5vw,19px);line-height:1.62;color:var(--mut)}
.am-ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:34px}
.am-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:15.5px;color:var(--ac-hi);
  border-bottom:1px solid color-mix(in srgb,var(--ac-hi) 40%,transparent);transition:gap .5s var(--ease),border-color .5s var(--ease)}
.am-link:hover{gap:12px;border-color:var(--ac-hi)}

/* hero art: a tilted manga panel built from real studio art (a world, two cast cutouts, a sample line) */
.am-art{position:relative;justify-self:center;width:100%;max-width:560px;padding:0 0 0 0}
.am-panel{position:relative;aspect-ratio:4/3.3;border:2px solid rgba(243,241,236,.9);border-radius:6px;overflow:hidden;background:#0b1020;
  transform:rotate(1.4deg);box-shadow:10px 10px 0 var(--ac),0 40px 80px -30px rgba(0,0,0,.9);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.am-art:hover .am-panel{transform:rotate(1.4deg) translateY(-2px);box-shadow:12px 12px 0 var(--ac),0 46px 90px -30px rgba(0,0,0,.9)}
.am-panel .bgw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.am-panel .cut{position:absolute;bottom:-3%;height:86%;width:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.am-panel .c1{left:12%}
.am-panel .c2{right:6%;height:80%}
.am-bubble{position:absolute;left:6%;top:7%;z-index:3;max-width:62%;padding:.65rem 1rem;background:#fff;color:#101116;border:3px solid #101116;
  border-radius:1.3rem 1.3rem 1.3rem .3rem;font-weight:800;font-size:clamp(13px,1.3vw,16px);line-height:1.25;box-shadow:4px 4px 0 rgba(16,17,22,.9);
  transform:rotate(-1.4deg)}
.am-bubble::after{content:"";position:absolute;left:16px;bottom:-15px;width:22px;height:18px;background:#fff;border-left:3px solid #101116;border-bottom:3px solid #101116;
  transform:skewX(24deg);clip-path:polygon(0 0,100% 0,0 100%)}
.am-tag{position:absolute;right:-6px;bottom:-14px;z-index:4;padding:9px 16px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--visit-fg);background:var(--visit-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 14px 30px -12px color-mix(in srgb,var(--ac) 80%,transparent)}

/* ── genre marquee ── */
.am-strip{position:relative;overflow:hidden;border-block:1px solid var(--edge);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));padding:20px 0}
.am-run{display:flex;width:max-content;animation:am-drift 52s linear infinite}
.am-strip:hover .am-run{animation-play-state:paused}
.am-run>div{display:flex;flex:none;align-items:center}
.am-run span{display:flex;align-items:center;gap:30px;padding-right:30px;font-family:var(--disp);font-size:clamp(26px,4vw,52px);line-height:1;color:#fff;white-space:nowrap}
.am-run span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px rgba(238,242,251,.85)}
.am-run span::after{content:"";width:.5em;height:.5em;flex:none;border-radius:50%;background:var(--ac);box-shadow:0 0 14px var(--ac)}
@keyframes am-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── four moves ── */
.am-moves{display:grid;gap:22px}
.am-move{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;align-items:center}
.am-move:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.am-move:nth-child(even) .am-txt{order:2}
.am-txt{padding:44px 44px 44px;display:flex;flex-direction:column;justify-content:center}
.am-num{font-family:var(--disp);font-size:clamp(46px,5vw,68px);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ac-hi);opacity:.9}
.am-txt h3{margin:14px 0 0;font-size:clamp(24px,2.5vw,32px);line-height:1.1;letter-spacing:-.02em;font-weight:800;color:#fff}
.am-txt p{margin:14px 0 0;font-size:16.5px;line-height:1.66;color:var(--mut)}
.am-media{position:relative;align-self:center;padding:14px}
.am-media .frame{position:relative;height:100%;border-radius:16px;overflow:hidden;background:#071226}
.am-media img{display:block;transition:transform 1.1s var(--ease)}
.am-move:hover .am-media img{transform:scale(1.02)}
.am-w4{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:100%;padding:0}
.am-w4 figure{position:relative;margin:0;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.am-w4 img{width:100%;height:100%;object-fit:cover}
.am-w4 figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(180deg,transparent,rgba(5,8,15,.85))}
.am-w4 figcaption em{margin-left:6px;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,234,250,.65)}
.am-castrow{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;min-height:240px;padding:24px 14px 0;border-radius:16px;
  background:radial-gradient(80% 90% at 50% 100%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.06))}
.am-castrow img{width:100%;height:auto;transform-origin:50% 100%;transition:transform .7s var(--ease)}
.am-castrow img:hover{transform:translateY(-6px) scale(1.04)}
.am-media .frame>img{width:100%;height:100%;object-fit:cover}
.am-media.shot .frame{aspect-ratio:1340/850;height:auto}
.am-media.shot .frame>img{object-fit:contain}

/* ── closing ── */
.am-end{position:relative;margin-top:110px;text-align:center;padding:84px 28px;border-radius:30px}
.am-end .bgimg{position:absolute;inset:0;z-index:0}
.am-end .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.am-end .bgimg::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 50% 50%,rgba(7,10,20,.5),rgba(7,10,20,.92))}
.am-end>*:not(.bgimg){position:relative;z-index:2}
.am-end h3{margin:18px auto 0;max-width:16ch;font-family:var(--disp);font-weight:400;font-size:clamp(30px,4.4vw,58px);line-height:1.04;letter-spacing:-.01em;color:#fff;text-wrap:balance}

/* ── tablet ── */
@media (max-width:1023px){
  .am-hero{padding:128px 0 80px}
  .am-grid{grid-template-columns:1fr;gap:56px}
  .am-copy{text-align:center}
  .am-lock{justify-content:center}
  .am-dek{margin-left:auto;margin-right:auto}
  .am-ctas{justify-content:center}
  .am-art{max-width:520px}
  .am-move,.am-move:nth-child(even){grid-template-columns:1fr}
  .am-move:nth-child(even) .am-txt{order:0}
  .am-txt{padding:36px 32px 18px}
  .am-media{min-height:0}
  .am-w4 figure{aspect-ratio:16/9}
}
/* ── phone ── */
@media (max-width:767px){
  .am-hero{padding:104px 0 64px}
  .am-grid{gap:48px}
  .am h1{font-size:clamp(34px,10.5vw,46px);-webkit-text-stroke-width:0}
  .am h1 .l2{-webkit-text-stroke-width:1.5px}
  .am-ctas{flex-direction:column;align-items:stretch;gap:6px}
  .am-ctas .pi-btn{width:100%}
  .am-ctas .am-link{justify-content:center}
  .am-panel{box-shadow:7px 7px 0 var(--ac),0 30px 60px -28px rgba(0,0,0,.9)}
  .am-art{padding-right:7px}
  .am-tag{right:2px}
  .am-txt{padding:28px 22px 12px}
  .am-media{padding:10px}
  .am-castrow{grid-template-columns:repeat(3,1fr);padding:16px 8px 0}
  .am-castrow img:nth-child(n+4){display:none}
  .am-end{margin-top:80px;padding:56px 18px}
  .am-end .pi-ctas{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .am-run{animation:none;display:block;width:auto;padding:0 16px}
  .am-run>div{flex-wrap:wrap;justify-content:center;row-gap:12px}
  .am-run>div:last-child{display:none}
  .am-panel,.am-art:hover .am-panel{transition:none}
  .am-media img,.am-castrow img,.am-link{transition:none}
}

/* short phones (320x568): the hero CTA sat at 590px, below the fold. (2026-10-07) */
@media (max-width:767px) and (max-height:620px){
  .am-hero{padding-top:80px}
  .am-lock{margin-bottom:12px}
  .am-lock img{width:44px;height:44px}
  .am-dek{margin-top:16px}
  .am-ctas{margin-top:20px}
}