/* =====================================================================
   Touch by ORB · Intro D
   Every class starts with .ic so nothing clashes with the rest of the site.
   Desktop first; the phone layout is the @media (max-width: 720px) block at the end.
   ===================================================================== */
.ic{position:fixed;inset:0;z-index:2147483000;background:#0A0A0C;color:#FFFFFF;overflow:hidden;font-family:'Archivo','Helvetica Neue',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  animation:ic-to-white .6s ease forwards var(--ic-white-at);transition:opacity 1s ease,visibility 0s linear 1s}
.ic *,.ic *::before,.ic *::after{box-sizing:border-box}
.ic.is-out{opacity:0;visibility:hidden;pointer-events:none}
.ic[hidden]{display:none}
.ic-stage{position:absolute;inset:0;overflow:hidden}
.ic-beat{position:absolute;inset:0;opacity:0;animation:ic-in .7s ease both,ic-out .6s ease forwards}
.ic-beat--black{background:#0A0A0C}
/* every line sits in the same place: centred on the screen */
.ic-line{position:absolute;left:clamp(28px,6vw,96px);right:clamp(28px,6vw,96px);top:50%;transform:translateY(-50%);margin:0 auto;text-align:center;max-width:14em;font-size:clamp(44px,5.6vw,88px);line-height:.98;font-weight:800;font-stretch:112%;letter-spacing:-0.035em;text-wrap:balance}
.ic-w{color:rgba(255,255,255,.16);animation:ic-word .5s ease forwards}
.ic-final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#FFFFFF;color:#0A0A0C;opacity:0;animation:ic-in .6s ease both}
.ic-final-line{margin:0;display:flex;justify-content:center;gap:.28em;font-size:clamp(64px,9vw,150px);line-height:.92;font-weight:800;font-stretch:125%;letter-spacing:-0.045em}
.ic-fw{display:inline-block;opacity:0;animation:ic-fw .7s cubic-bezier(.2,.7,.2,1) both}
.ic-fw--done{background:linear-gradient(90deg, #00C8FF 0%, #1A3BFF 38%, #7B2BFF 70%, #FF7AB0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ic-sign{position:absolute;left:0;right:0;top:calc(50% + clamp(70px,6.4vw,110px));margin:0;text-align:center;font:500 13px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:#8E8D95;opacity:0;animation:ic-in .9s ease both}
.ic-sign::before{content:"";display:block;width:28px;height:1px;margin:0 auto 12px;background:linear-gradient(90deg, #00C8FF 0%, #1A3BFF 38%, #7B2BFF 70%, #FF7AB0 100%)}
.ic-skip{position:absolute;z-index:5;right:clamp(16px,3vw,40px);top:clamp(16px,2.4vw,30px);height:36px;padding:0 14px;border:0;border-radius:999px;background:rgba(128,128,136,.16);color:#8E8D95;font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ic-skip:hover{color:#C9C8CF}
.ic-skip:focus-visible{outline:2px solid #7B2BFF;outline-offset:3px}
.ic-bar{position:absolute;z-index:5;left:50%;bottom:26px;width:120px;height:2px;margin-left:-60px;border-radius:2px;background:rgba(128,128,136,.25);overflow:hidden}
.ic-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, #00C8FF 0%, #1A3BFF 38%, #7B2BFF 70%, #FF7AB0 100%);transform-origin:left;animation:ic-bar var(--ic-total) linear forwards}
@keyframes ic-to-white{to{background:#FFFFFF}}
@keyframes ic-in{from{opacity:0}to{opacity:1}}
@keyframes ic-out{from{opacity:1}to{opacity:0}}
@keyframes ic-word{to{color:#FFFFFF}}
@keyframes ic-fw{from{opacity:0;transform:translateY(.25em);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ic-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.ic-lock,html.ic-lock body{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .ic-beat{display:none}.ic{animation:none;background:#FFFFFF}
  .ic-final,.ic-fw,.ic-sign{animation:none;opacity:1;filter:none;transform:none}.ic-bar::after{animation:none}
}

/* hollow outline words: huge, white outline, transparent inside, drifting slowly behind each line */
.ic-ol{position:absolute;left:0;top:50%;margin:0;white-space:nowrap;font-size:clamp(180px,24vw,400px);line-height:.82;font-weight:800;font-stretch:125%;letter-spacing:-0.03em;
  color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.55);pointer-events:none;user-select:none;animation-timing-function:linear;animation-fill-mode:both}
.ic-ol--echo{-webkit-text-stroke-color:rgba(255,255,255,.12)}
.ic-ol--up{margin-top:-1.05em}
.ic-ol--down{margin-top:1.05em}
.ic-ol--light{-webkit-text-stroke-color:rgba(10,10,12,.10)}
.ic-ol--l{animation-name:ic-ol-l}
.ic-ol--r{animation-name:ic-ol-r}
@keyframes ic-ol-l{from{transform:translate(18%,-50%)}to{transform:translate(-14%,-50%)}}
@keyframes ic-ol-r{from{transform:translate(-14%,-50%)}to{transform:translate(18%,-50%)}}
.ic-vig{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(10,10,12,.55) 0%,rgba(10,10,12,0) 100%)}
.ic-final .ic-final-line{position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){.ic-ol{animation:none;transform:translate(0,-50%)}}

/* =====================================================================
   PHONE (720px and below) · matches the iPhone v5 design at 393px
   ===================================================================== */
@media (max-width: 720px){
  .ic-line{left:24px;right:24px;max-width:none;font-size:clamp(34px,9.6vw,42px)}
  .ic-final-line{flex-direction:column;align-items:center;gap:.02em;font-size:clamp(64px,19vw,80px)}
  .ic-sign{top:calc(50% + 150px);font-size:12px}
  .ic-ol{font-size:clamp(150px,46vw,220px);-webkit-text-stroke-width:1.2px}
  @keyframes ic-ol-l{from{transform:translate(8%,-50%)}to{transform:translate(-62%,-50%)}}
  @keyframes ic-ol-r{from{transform:translate(-62%,-50%)}to{transform:translate(8%,-50%)}}
}