/* =========================================================
   IN TOUCH — Conference 2026 Vienna
   Pure HTML/CSS/JS · static · domain-ready

   Geometry, type and colour are taken 1:1 from the Figma file
   "IN-TOUCH" (liza.rashica), key itMuyBfe5VFeqXqzmtGEtH.
   No responsive re-flow anywhere: every view is an exact Figma
   frame with absolute coordinates. Desktop and mobile are the
   same design — mobile is simply the smaller frame.
   ========================================================= */

:root{
  /* --- colour system, 1:1 from Figma --- */
  --pink:   #FF60C9;
  --blue:   #1100FF;
  --green:  #03923B;
  --orange: #DB6600;
  --purple: #B03BE1;
  --grey:   #737373;
  --white:  #FFFFFF;
  /* conference-topic colours + arrival-day red */
  --red:    #FF0000;
  --coral:  #FF5D60;
  --cyan:   #1FCAF0;
  --brown:  #A97700;
  --blue2:  #0049DC;
  /* unselected registration answer triangle — blue like the Back button */
  --ans-bg: var(--blue);

  /* Figma design font is Arial Nova Bold — rendered as Arial Bold */
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Figma type metrics */
  --fs-d: 16.585px;  --ls-d: -0.3317px;
  --fs-m: 13.072px;  --ls-m: -0.2614px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:var(--font);
  font-weight:700;
  background:var(--white);
  color:#000;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }

/* Link im Fließtext (www.artmov.at im Collaboration-Block).
   Statisch bleibt es 1:1 wie in Figma — Unterstreichung erst bei
   Hover / Tastaturfokus, damit erkennbar ist, dass es klickbar ist. */
.inline-link{ cursor:pointer; }
.inline-link:focus-visible{ text-decoration:underline; }
@media (hover:hover){
  .inline-link:hover{ text-decoration:underline; }
}
img,svg{ display:block; }

/* ---------- view routing ---------- */
.view{ display:none; }
.view.is-active{ display:block; animation:fade .35s ease both; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* =========================================================
   1.1  LANDING  (unchanged — approved)
   ========================================================= */
body.landing-locked{ overflow:hidden; height:100dvh; }

#view-landing{
  height:100dvh;
  overflow:hidden;
  background:var(--white);
}
.stage-wrap{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
}

.stage{
  position:absolute;
  top:0; left:0;
  transform-origin:top left;
  transform:scale(var(--scale,1));
  background:var(--white);
}
.stage-desktop{ width:1728px; height:1117px; }
.stage-mobile{  width:393px;  height:852px; display:none; }

@media (max-width:760px){
  .stage-desktop{ display:none; }
  .stage-mobile{  display:block; }
}

.node{ position:absolute; }
/* Sharp SVGs inside scaled stages: WebKit rasterises an svg <img> at its
   layout size (CSS px), then the parent transform:scale() enlarges that
   bitmap — blurry on 3× phone screens. Laying the image out at 3× and
   scaling it back down makes the raster 3× denser at identical visual
   size. Applies to every stage/logo image. */
.node img{
  width:300%; height:300%; display:block;
  transform:scale(.33333); transform-origin:top left;
}
.node.mmore,
.node.ext{ cursor:pointer; }   /* .ext = outbound link (ARTMOV -> artmov.at) */

.reg-btn{
  position:absolute; display:block;
  animation:reg-loop 2.4s ease-in-out infinite alternate;
}
.reg-btn img{
  width:300%; height:300%; display:block;
  transform:scale(.33333); transform-origin:top left;
}
@keyframes reg-loop{
  from{ transform:translateX(0); }
  to  { transform:translateX(63px); }
}

.lbl  { position:absolute; font-size:16.585px; line-height:1.01; letter-spacing:-0.33px; }
.lbl-m{ position:absolute; font-size:13.06px;  line-height:1.01; letter-spacing:-0.26px; }

/* colour helpers */
.pink  { color:var(--pink); }
.green { color:var(--green); }
.orange{ color:var(--orange); }
.purple{ color:var(--purple); }
.bluec { color:var(--blue); }
.blue2 { color:var(--blue2); }
.red   { color:var(--red); }
.coral { color:var(--coral); }
.cyan  { color:var(--cyan); }
.brown { color:var(--brown); }

/* =========================================================
   1.2 / 1.3  —  exact Figma frames, scale approach
   ---------------------------------------------------------
   Every child of .frame carries its Figma coordinates twice:
     --dl/--dt/--dw/--dh   desktop frame (1728 wide)
     --ml/--mt/--mw/--mh   mobile  frame ( 393 wide)
   body.mob switches the whole frame over. One markup tree, so
   desktop and mobile can never drift apart in content.
   ========================================================= */
.frame-wrap{ position:relative; width:100%; overflow:hidden; }

.frame{
  position:relative;
  transform-origin:top left;
  transform:scale(var(--fscale,1));
  background:var(--white);
}
#frame-info{ width:1728px; height:4049px; }
#frame-reg { width:1728px; height:1559px; }
body.mob #frame-info{ width:393px; height:3003px; }
body.mob #frame-reg { width:393px; height:1238px; }

/* direct children = Figma nodes */
.frame > *{
  position:absolute;
  left:calc(var(--dl, 0) * 1px);
  top: calc(var(--dt, 0) * 1px);
  font-size:var(--fs-d);
  line-height:1.01;
  letter-spacing:var(--ls-d);
  word-break:break-word;
}
.frame > .fw{ width:calc(var(--dw) * 1px); }

body.mob .frame > *{
  left:calc(var(--ml, 0) * 1px);
  top: calc(var(--mt, 0) * 1px);
  font-size:var(--fs-m);
  letter-spacing:var(--ls-m);
}
body.mob .frame > .fw{ width:calc(var(--mw) * 1px); }

/* long body texts: keep the blank lines, still wrap inside the fixed width */
.pre { white-space:pre-line; }
/* short header blocks: keep the line breaks AND never wrap
   (never combine with .nw — nowrap would swallow the breaks) */
.prew{ white-space:pre; }
.nw  { white-space:nowrap; }
.ta-r{ text-align:right; }

/* ---------- triangle buttons (REGISTER / BACK) ----------
   REGISTER uses BUTTON_REGISTER.svg directly — the pink triangle
   and the blue "Register" wordmark are both baked into that file,
   same asset the landing uses.
   BACK is the same triangle rotated 180°, but blue with a white
   label — so the SVG is used as a MASK there (the wordmark sits
   inside the triangle, so the mask is a clean silhouette) and the
   caption is real text on top.                                 */
.frame > .btn-tri{
  width: calc(var(--dw) * 1px);
  height:calc(var(--dh) * 1px);
  display:block; cursor:pointer;
  background:none; border:none; padding:0;
  font-family:var(--font); font-weight:700;
}
body.mob .frame > .btn-tri{
  width: calc(var(--mw) * 1px);
  height:calc(var(--mh) * 1px);
}
.btn-tri img{ position:absolute; inset:0; width:100%; height:100%; }

.btn-tri.back .shape{
  position:absolute; inset:0;
  background:var(--blue);
  transform:rotate(180deg);
  -webkit-mask:url(assets/BUTTON_REGISTER.svg) no-repeat center / 100% 100%;
          mask:url(assets/BUTTON_REGISTER.svg) no-repeat center / 100% 100%;
}

.btn-tri .lab{
  position:absolute; white-space:nowrap;
  font-size:var(--fs-d); line-height:1.01; letter-spacing:var(--ls-d);
  left:calc(var(--ldl) * 1px);
  top: calc(var(--ldt) * 1px);
}
body.mob .btn-tri .lab{
  font-size:var(--fs-m); letter-spacing:var(--ls-m);
  left:calc(var(--lml) * 1px);
  top: calc(var(--lmt) * 1px);
}
.btn-tri.back .lab{ color:var(--white); }

/* nodes that exist only in the desktop frame */
body.mob .d-only{ display:none; }
/* the day-choice question is #1100FF on desktop, #0049DC on mobile */
body.mob .q1{ color:var(--blue2); }

/* ---------- registration answer triangles ----------
   ANSWER_TRIANGLE.svg is the portrait artboard; Figma rotates it
   90° into the landscape box. Same mask trick so the selected
   state can be filled with the answer's own colour.          */
.frame > .ans{
  width: calc(var(--dw) * 1px);
  height:calc(var(--dh) * 1px);
  cursor:pointer;
  background:none; border:none; padding:0;
  font-family:var(--font); font-weight:700;
}
body.mob .frame > .ans{
  width: calc(var(--mw) * 1px);
  height:calc(var(--mh) * 1px);
}
.ans .shape{
  position:absolute; top:0; left:0;
  width: calc(var(--dh) * 1px);   /* portrait: w = landscape h */
  height:calc(var(--dw) * 1px);   /* portrait: h = landscape w */
  transform-origin:top left;
  transform:rotate(90deg) translate(0, -100%);
  background:var(--ans-bg);
  -webkit-mask:url(assets/ANSWER_TRIANGLE.svg) no-repeat center / 100% 100%;
          mask:url(assets/ANSWER_TRIANGLE.svg) no-repeat center / 100% 100%;
  transition:background .18s ease;
}
body.mob .ans .shape{
  width: calc(var(--mh) * 1px);
  height:calc(var(--mw) * 1px);
}
.ans .cap{
  color:var(--white);        /* white wordmark on the blue triangle, like Register/Back */
  position:absolute; text-align:left;
  font-size:var(--fs-d); line-height:1.01; letter-spacing:var(--ls-d);
  left:calc(var(--cdl) * 1px);
  top: calc(var(--cdt) * 1px);
  width:calc(var(--cdw) * 1px);
}
body.mob .ans .cap{
  font-size:var(--fs-m); letter-spacing:var(--ls-m);
  left:calc(var(--cml) * 1px);
  top: calc(var(--cmt) * 1px);
  width:calc(var(--cmw) * 1px);
}
/* selected: triangle takes the answer's own colour, caption goes white */
.ans[aria-pressed="true"] .shape{ background:var(--acc); }
.ans[aria-pressed="true"] .cap  { color:var(--white); }

/* ---------- form fields ----------
   The dotted rules are Figma text nodes, reproduced literally and
   clipped to the Figma width. The inputs sit transparently on top. */
.dots{ color:var(--pink); overflow:hidden; }

.frame > input{
  width:calc(var(--dw) * 1px);
  font-family:var(--font); font-weight:700;
  font-size:var(--fs-d); line-height:1.01; letter-spacing:var(--ls-d);
  color:var(--blue);
  border:none; outline:none; background:none;
  padding:0;
}
body.mob .frame > input{
  width:calc(var(--mw) * 1px);
  font-size:var(--fs-m); letter-spacing:var(--ls-m);
}
.frame > input::placeholder{ color:var(--blue); opacity:.45; }

.frame > .arrow{
  width:calc(var(--dw) * 1px);
  height:calc(var(--dh) * 1px);
  opacity:0; transition:opacity .2s;
}
body.mob .frame > .arrow{
  width:calc(var(--mw) * 1px);
  height:calc(var(--mh) * 1px);
}
.frame > .arrow.on{ opacity:1; }
.frame > .arrow img{ width:100%; height:100%; }

/* honeypot field — parked far off-canvas, never visible or focusable */
.frame > input.hp{
  position:absolute !important;
  left:-9999px !important; top:0 !important;
  width:1px; height:1px;
  opacity:0; pointer-events:none;
}

/* ---------- fixed logo row ----------
   FIXED_LOGOS stays pinned to the bottom-left of the viewport on
   the two scrolling views. No backdrop — content scrolls straight
   underneath it.                                                */
.foot-fixed{
  position:fixed; left:0; bottom:0; z-index:10;
  transform-origin:bottom left;
  transform:scale(var(--fscale,1));
  pointer-events:none;
  display:none;
}
body.show-foot .foot-fixed{ display:block; }
/* Height is chosen so the logo row lands on exactly the same line as on
   the landing, where the logos sit 5.42px above the frame bottom
   (desktop 1117-1056-55.578) / 5.33px (mobile 852-807-39.671).
   109 = 48 + 55.578 + 5.42   ·   74 = 29 + 39.671 + 5.33            */
.foot-fixed .foot-inner{ position:relative; width:370px; height:109px; }
body.mob .foot-fixed .foot-inner{ width:266px; height:74px; }

/* Email link scrolls with the page content (frame child), placed in the
   reserved foot space below the frame bottom */
.mailto-end{ color:var(--blue); cursor:pointer; }
body.mob .mailto-end{ color:var(--blue2); }
/* combined logo lock-up, same asset the landing uses */
/* laid out at 3× and scaled back — same sharpness trick as .node img */
.foot-fixed .logos{
  position:absolute; left:5px; top:48px;
  width:1071.744px; height:166.734px;
  transform:scale(.33333); transform-origin:top left;
}
body.mob .foot-fixed .logos{
  left:3px; top:29px;
  width:765px; height:119.013px;
}

/* =========================================================
   Shared hover — difference blend, as on the landing.
   Guarded by (hover:hover) so a tap never sticks on touch.
   ========================================================= */
@media (hover:hover){
  .reg-btn,
  .node.mmore,
  .node.ext,
  .btn-tri,
  .ans{
    transition:filter .18s ease;
  }
  .reg-btn:hover,
  .node.mmore:hover,
  .node.ext:hover,
  .btn-tri:hover,
  .ans:hover,
  .btn-tri:focus-visible,
  .node.mmore:focus-visible,
  .node.ext:focus-visible,
  .reg-btn:focus-visible,
  .ans:focus-visible{
    mix-blend-mode:difference;
  }
}