/* AR Studio — motion layer.
   Loaded after each page's own stylesheet, so it reads those pages' tokens
   instead of restating them.

   One material, used with discipline: an ink line that draws itself. The
   studio's whole world is a brow being drawn — heavy ink type, a hand-placed
   circular seal, a drawn sparkle mark. The line is that gesture, and it is
   the only authored sequence on the site.

   Everything here is transform and opacity. No blur, no filters, no
   scroll-linked work, no layout-driving animation: these pages run on
   mid-range mobile.

   Default state is always the finished state. Entrances are keyframes with a
   `both` fill, so a page whose motion layer fails to load still shows its
   content; only the timing is authored, never the visibility. */

/* ---------- easing -------------------------------------------------------
   Confident deceleration for anything that arrives. Quicker, simpler curve
   for state changes that should feel like an answer, not an event. */
:root{
  --ease-ink:cubic-bezier(.16,1,.3,1);
  --ease-answer:cubic-bezier(.33,1,.68,1);
}

/* ==========================================================================
   1. THE DRAWN LINE — the focal beat
   ==========================================================================
   A stroke that scales in from its left edge while a red mark lands at the
   finish, the way a pen sets down and lifts. Both children sit in an
   unscaled wrapper, so the mark stays a circle instead of being squashed
   along with the stroke. */

.ink{
  position:relative;
  display:block;
  width:var(--ink-w,min(430px,60%));
  height:2px;
  margin:var(--ink-gap,0) auto var(--ink-gap-after,20px);
  pointer-events:none;
}
.ink i{position:absolute;left:0;top:0;display:block}
.ink .stroke{
  width:100%;height:100%;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:0 50%;
  animation:ink-draw var(--ink-dur,.56s) var(--ease-ink) var(--ink-delay,.4s) both;
}
.ink .mark{
  top:50%;left:100%;
  width:10px;height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--red);
  transform:scale(0);
  animation:ink-mark .34s var(--ease-ink) calc(var(--ink-delay,.4s) + var(--ink-mark-lag,.48s)) both;
}

@keyframes ink-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* The mark lands slightly over-square, then settles — the hand placing it. */
@keyframes ink-mark{
  from{transform:scale(0);opacity:0}
  62%{transform:scale(1.22);opacity:1}
  to{transform:scale(1);opacity:1}
}

/* The hand-placed seals settle into their own rotation rather than sliding in.
   Each page keeps the angle it already had. */
@keyframes seal-drop{
  from{transform:translateY(-28px) scale(.88);opacity:0}
  66%{opacity:1}
  to{transform:rotate(var(--seal-rot,0deg))}
}

/* ==========================================================================
   2. ARRIVAL
   ==========================================================================
   Distance is small and consistent: text lifts 14px, photographs 22px. The
   ink line is the only element that travels further, because it is the one
   drawing. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lift{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Small state changes: the answer to a question, the reply to a copy. */
@keyframes answer-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ==========================================================================
   3. PER-PAGE SCORE
   ==========================================================================
   Timings differ by how much the page has to say before the line is worth
   drawing; the sequence itself is identical, because the line is the brand. */

/* The line is the headline's underline, so it takes even air above and below
   rather than inheriting whatever margin the page happened to leave. */
body[data-motion="home"] .ink{--ink-gap:34px;--ink-gap-after:22px}
body[data-motion="inner"] .ink{--ink-gap:28px;--ink-gap-after:26px}
body[data-motion="book"] .ink{--ink-gap:28px;--ink-gap-after:26px}

/* Each page sets its own h1 bottom margin for the block that used to follow
   the headline. The line is that block now, so it is zeroed here and the
   spacing above is owned entirely by --ink-gap. */
body[data-motion="home"] .hero h1{margin-bottom:0}
body[data-motion="inner"] .hero h1,
body[data-motion="book"] .hero h1{margin-bottom:0}


/* Home: the full beat. The headline lands, the line draws across the gap
   where the eye already expects a rule, the photographs settle behind it. */
body[data-motion="home"] .location{animation:rise .5s var(--ease-ink) .04s both}
body[data-motion="home"] .hero h1{animation:rise .55s var(--ease-ink) .1s both}
body[data-motion="home"] .hero-copy{animation:rise .5s var(--ease-ink) .28s both}
body[data-motion="home"] .hero-actions{animation:rise .5s var(--ease-ink) .38s both}
body[data-motion="home"] .photo-row{animation:lift .62s var(--ease-ink) .46s both}
body[data-motion="home"] .sticker{
  --seal-rot:12deg;
  animation:seal-drop .56s var(--ease-ink) .72s both;
}

/* Inner pages: one beat lighter. Type first, then the line, then the page
   goes quiet — these are reading surfaces and should not hold the visitor. */
body[data-motion="inner"] .hero h1{animation:rise .5s var(--ease-ink) .06s both}
body[data-motion="inner"] .hero>p{animation:rise .46s var(--ease-ink) .22s both}
body[data-motion="inner"] .visit-photos{animation:lift .56s var(--ease-ink) .4s both}
body[data-motion="inner"] .sticker{
  --seal-rot:10deg;
  animation:seal-drop .52s var(--ease-ink) .6s both;
}

/* Booking: the line is the transition from wanting to having decided, so it
   keeps the full beat but arrives sooner. */
body[data-motion="book"] .hero h1{animation:rise .5s var(--ease-ink) .06s both}
body[data-motion="book"] .hero p{animation:rise .46s var(--ease-ink) .22s both}
body[data-motion="book"] .aside-photo{animation:lift .56s var(--ease-ink) .46s both}

/* The stroke, as a score: drawn on the way the visitor reads it. */
body[data-motion="home"] .ink{--ink-delay:.4s;--ink-dur:.56s;--ink-mark-lag:.48s}
body[data-motion="inner"] .ink,
body[data-motion="book"] .ink{--ink-delay:.36s;--ink-dur:.5s;--ink-mark-lag:.43s}

/* ==========================================================================
   4. FEEDBACK
   ==========================================================================
   Arrows point where they lead, and move when asked. `translate` rather than
   `transform` so the jump-link arrows keep the 90° they are set to. */
.btn svg,
.text-link svg,
.arrow-circle svg{
  transition:translate .18s var(--ease-answer);
}
.btn:hover svg,
.text-link:hover svg,
.service-row:hover .arrow-circle svg{translate:4px 0}

.arrow-circle{transition:background .2s,border-color .2s}

/* Questions answer in place, instead of the text simply being there. */
details[open]>p{animation:answer-in .24s var(--ease-answer) both}

/* ==========================================================================
   5. CONTINUITY
   ==========================================================================
   Filtering: the cards that leave step down and out, the one that stays
   settles into the wider column, and the column change is transitioned
   rather than snapped so the grid reads as rearranging, not jumping. */
.essential{
  transition:opacity .18s var(--ease-answer),transform .18s var(--ease-answer);
}
.essential.is-leaving{opacity:0;transform:translateY(10px) scale(.985);pointer-events:none}
.selection-grid.is-settling .essential:not([hidden]){animation:lift .26s var(--ease-answer) both}

/* The booking form hands over to its summary. Each side gets a short exit
   before the other arrives, so the answers do not simply vanish. */
.is-leaving-out{opacity:0;transform:translateY(-8px);transition:opacity .16s,transform .16s}
.result{animation:rise .3s var(--ease-ink) both}

/* The copy confirmation is the one piece of feedback that must never fail to
   appear, so it is given a resting opacity and a re-triggerable class rather
   than a `:not(:empty)` animation that can start while its panel is still
   hidden and never run. */
.status{opacity:1}
.status.is-confirming{animation:answer-in .24s var(--ease-answer) both}

/* ==========================================================================
   6. REDUCED MOTION
   ==========================================================================
   The line is part of the page now, so it stays — it simply arrives already
   drawn. State feedback stays legible: departures and arrivals are still
   legible changes of presence and colour, they just no longer travel. */
@media(prefers-reduced-motion:reduce){
  .ink .stroke{animation:none;transform:none}
  .ink .mark{animation:none;transform:none;opacity:1}
  .location,.hero h1,.hero-copy,.hero-actions,.photo-row,.sticker,
  .hero>p,.visit-photos,.aside-photo,.result{animation:none!important}
  .essential{transition:none}
  .is-leaving-out{transition:none;opacity:0}
  .btn:hover svg,.text-link:hover svg,.service-row:hover .arrow-circle svg{translate:none}
  details[open]>p{animation:none}
}

/* ==========================================================================
   7. NARROW SCREENS
   ==========================================================================
   A smaller page gets a quicker page. The line is shorter and lands sooner;
   the mark arrives before the visitor has finished reading the headline. */
@media(max-width:700px){
  .ink{--ink-w:min(300px,64%);--ink-gap:18px;--ink-dur:.44s;--ink-mark-lag:.37s}
  body[data-motion="home"] .ink{--ink-delay:.34s}
  body[data-motion="inner"] .ink,
  body[data-motion="book"] .ink{--ink-delay:.3s}
  body[data-motion="home"] .photo-row{animation:lift .5s var(--ease-ink) .36s both}
  body[data-motion="home"] .sticker{animation:seal-drop .46s var(--ease-ink) .56s both}
}