/* =====================================================================
   REAL 360 · its solutions (r360-detail.js): a state over the chapter's own scene, opened from its core.
   The stage at the left (a rounded frame: carbon, grain, the service's word and number behind, one drawing,
   a texture over it), the copy at the right; portrait: the stage above, the copy at the foot. Placed by the
   script: --r3d-x, --r3d-y, --r3d-sw, --r3d-sh, --r3d-rad (the stage), --r3d-sx, --r3d-sy (its centre),
   --r3d-cl, --r3d-cw, --r3d-top (the copy), --r3d-ct, --r3d-cr (the close control). Closed it takes no room
   and no pointer.
   ===================================================================== */
.r3d{ position:absolute; inset:0; overflow:hidden; visibility:hidden; pointer-events:none; }
.r3d.is-open{ visibility:visible; pointer-events:auto; }
.is-still .r3d, .is-still .r3d *{ transition:none; } /* (reduced motion: shown at once, so its control can take the focus as it opens) */
.r3d:focus{ outline:none; } /* (it holds the focus while it opens, then hands it to its close control) */
/* the space behind it, graphite: a little lighter round the stage, the far lights still there under it */
.r3d__veil{ position:absolute; inset:0; opacity:0; background:
  radial-gradient(ellipse 46% 62% at var(--r3d-sx, 30%) var(--r3d-sy, 52%), rgba(46,43,40,.6) 0%, rgba(38,36,35,.5) 38%, rgba(31,30,29,0) 100%),
  linear-gradient(90deg, rgba(31,30,29,.66) 0%, rgba(31,30,29,.52) 50%, rgba(24,23,22,.74) 100%); }

/* the stage: a frame with its layers apart; the pointer moves it a few px, turns it a quarter of a degree */
.r3d__stage{ position:absolute; left:var(--r3d-x, 6%); top:var(--r3d-y, 14%); width:var(--r3d-sw, 44vw); height:var(--r3d-sh, 70vh); perspective:1800px; pointer-events:none; }
.r3d__frame{ position:absolute; inset:0; overflow:hidden; border-radius:var(--r3d-rad, 32px); background:#1a1918; isolation:isolate; }
.r3d.is-open .r3d__frame, .r3d.is-open .r3d__type{ will-change:transform; }
.r3d.is-calm .r3d__frame, .r3d.is-calm .r3d__type{ will-change:auto; }
.r3d__frame::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
  box-shadow:inset 0 0 0 1px rgba(174,167,163,.12), inset 0 1px 0 0 rgba(192,138,87,.16); }
/* its ground: graphite, lighter where the subject stands, its edges warm black, a fine grain */
.r3d__bg{ position:absolute; inset:0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 46%, rgba(10,9,8,0) 52%, rgba(10,9,8,.5) 100%),
    radial-gradient(ellipse 62% 58% at 44% 40%, #393837 0%, #2c2b2a 42%, #222120 72%, #1a1918 100%); }
.r3d__bg::after{ content:""; position:absolute; inset:0; background:url(assets/r3d-grain.png) 0 0 / 160px 160px; opacity:.07; }
/* its words, behind the drawing: the service's name (huge, cropped by the frame's foot), its number (cropped by its
   right edge), and the same name standing at its left edge; each changes through its mask */
.r3d__type{ position:absolute; inset:0; z-index:1; font-family:var(--font); pointer-events:none; }
.r3d__word{ position:absolute; left:calc(var(--r3d-sw, 600px) * .035); bottom:0; display:block; font-size:min(calc(var(--r3d-sh, 560px) * .34), calc(var(--r3d-sw, 600px) * .215));
  font-weight:900; line-height:.74; letter-spacing:-.05em; text-transform:uppercase; white-space:nowrap; color:rgba(241,237,231,.085); transform:translateY(.1em); }
.r3d__wm{ display:grid; overflow:hidden; padding-top:.08em; }
.r3d__w{ grid-area:1 / 1; display:block; }
.r3d__idx{ position:absolute; right:calc(var(--r3d-if) * -.16); top:calc(var(--r3d-sh, 560px) * .035); display:flex; overflow:hidden; --r3d-if:min(calc(var(--r3d-sh, 560px) * .4), calc(var(--r3d-sw, 600px) * .34));
  font-size:var(--r3d-if); font-weight:800; line-height:.86; letter-spacing:-.07em; color:rgba(192,138,87,.34); font-variant-numeric:tabular-nums; }
.r3d__i0{ display:block; }
.r3d__im{ display:grid; overflow:hidden; }
.r3d__i{ grid-area:1 / 1; display:block; }
.r3d__side{ position:absolute; left:calc(var(--r3d-rad, 32px) * .62); bottom:calc(var(--r3d-rad, 32px) * 1.15); display:flex; align-items:center; gap:12px;
  transform-origin:0 100%; transform:rotate(-90deg) translateY(100%); font-size:10px; font-weight:500; line-height:1.3; letter-spacing:.32em; text-transform:uppercase; color:rgba(241,237,231,.62); white-space:nowrap; }
.r3d__sl{ display:block; width:30px; height:1px; background:linear-gradient(90deg, rgba(174,167,163,.2), rgba(192,138,87,.85)); transform-origin:0 50%; }
.r3d__sm{ display:grid; overflow:hidden; }
.r3d__s{ grid-area:1 / 1; display:block; }
/* the drawing and its texture over all of it (still: no flicker) */
.r3d__svg{ position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; max-width:none; overflow:visible; }
.r3d__guides path:nth-child(1){ stroke:rgba(174,167,163,.14); }
.r3d__guides path:nth-child(2){ stroke:rgba(192,138,87,.2); }
.r3d__guides path:nth-child(3){ stroke:rgba(174,167,163,.1); }
.r3d__soft{ mix-blend-mode:soft-light; }
.r3d__fx{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.06;
  background:repeating-linear-gradient(180deg, rgba(8,7,6,.9) 0 1px, rgba(8,7,6,0) 1px 3px), url(assets/r3d-grain.png) 0 0 / 160px 160px; }

/* the close control: the other states' own, under the bar at the frame's right */
.r3d__close{ top:var(--r3d-ct, 120px); right:var(--r3d-cr, 104px); z-index:5; }

/* the copy */
.r3d__copy{ position:absolute; left:var(--r3d-cl, 55%); top:var(--r3d-top, 30%); width:var(--r3d-cw, 38vw); pointer-events:auto; }
.r3d__eyebrow{ display:block; font-size:.77rem; margin-bottom:clamp(18px,2.6vh,26px); }
.r3d__title{ width:max-content; max-width:none; } /* (its lines as long as they are: never cut by their masks) */
.r3d__body{ max-width:46ch; }
.r3d__support{ margin-top:clamp(14px,2vh,20px); max-width:46ch; font-size:.95rem; line-height:1.45; color:var(--hi); }
/* the service the stage shows: four short marks in a track that never changes its width (the active one longer,
   copper), level with the name's first line; the name, its number before it, through a mask as tall as the
   tallest of the four (nothing below it moves when it changes) */
.r3d__svc{ display:flex; align-items:flex-start; gap:16px; margin-top:clamp(18px,3vh,30px); font-size:.7rem; }
.r3d__ticks{ display:flex; align-items:center; gap:5px; flex:0 0 77px; width:77px; height:1.4em; }
.r3d__ticks i{ display:block; flex:0 0 auto; width:12px; height:2px; border-radius:1px; background:rgba(174,167,163,.28); transition:width .6s var(--ease), background-color .6s var(--ease); }
.r3d__ticks i.is-on{ width:26px; background:rgba(192,138,87,.95); }
.r3d__mask{ display:grid; flex:1 1 auto; min-width:0; overflow:hidden; padding-bottom:.25em; margin-bottom:-.25em; }
.r3d__lab{ grid-area:1 / 1; font-size:1em; font-weight:600; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--hi); white-space:nowrap; transform:translateY(140%); }
.r3d__lab.is-on{ transform:none; transition:transform .75s var(--ease) .26s; }
.r3d__lab.is-out{ transform:translateY(-140%); transition:transform .34s cubic-bezier(.5,0,.75,0); } /* (out before the next is in: never two names at once) */
.r3d__labn{ font-weight:600; color:var(--cognac-lite); margin-right:.9em; }
/* reduced motion: the four in one line, no marks */
.r3d.is-calm .r3d__ticks{ display:none; }
.r3d.is-calm .r3d__labn{ display:none; }
.r3d.is-calm .r3d__mask{ display:block; overflow:visible; padding:0; margin:0; min-height:0; }
.r3d.is-calm .r3d__lab{ display:inline; font-size:.66rem; line-height:1.8; letter-spacing:.12em; white-space:normal; transform:none; transition:none; }
.r3d.is-calm .r3d__lab:not(:last-child)::after{ content:"\00a0·"; color:var(--mute); } /* (the dot stays at the end of a line, never opens the next) */

/* portrait: the stage above, the copy at the foot */
@media (orientation:portrait){
  .r3d__veil{ background:
    radial-gradient(ellipse 80% 40% at var(--r3d-sx, 50%) var(--r3d-sy, 30%), rgba(46,43,40,.6) 0%, rgba(38,36,35,.5) 40%, rgba(31,30,29,0) 100%),
    linear-gradient(180deg, rgba(31,30,29,.58) 0%, rgba(31,30,29,.62) 50%, rgba(24,23,22,.8) 100%); }
  .r3d__svc{ margin-top:14px; }
  .r3d__idx{ top:auto; bottom:calc(var(--r3d-sh, 400px) * .05); --r3d-if:min(calc(var(--r3d-sh, 400px) * .3), calc(var(--r3d-sw, 400px) * .26)); }
}
@media (orientation:portrait) and (max-width:600px){
  .r3d__eyebrow{ margin-bottom:12px; }
  .r3d__body{ margin-top:14px; font-size:.95rem; line-height:1.48; }
  .r3d__support{ margin-top:12px; font-size:.86rem; }
  .r3d__svc{ font-size:.62rem; }
  .r3d__lab{ letter-spacing:.13em; white-space:normal; } /* (a long name takes two lines rather than losing its end) */
  .r3d__mask{ min-height:3.05em; } /* (two lines kept for it, whichever is shown) */
  .r3d__ticks{ flex-basis:66px; width:66px; gap:4px; }
  .r3d__ticks i{ width:10px; } .r3d__ticks i.is-on{ width:24px; }
  .r3d__word{ color:rgba(241,237,231,.065); }
  .r3d__side{ font-size:9px; letter-spacing:.26em; }
  .r3d__fx{ opacity:.045; background:repeating-linear-gradient(180deg, rgba(8,7,6,.9) 0 1px, rgba(8,7,6,0) 1px 4px); } /* (small screens: lighter texture) */
  .r3d__bg::after{ opacity:.05; }
}
@media (orientation:portrait) and (max-width:600px) and (max-height:740px){
  .r3d__body{ font-size:.88rem; line-height:1.42; }
  .r3d__support{ display:none; }
}
/* phones held sideways: everything smaller, the body shorter in its lines */
@media (orientation:landscape) and (max-height:520px){
  .r3d__eyebrow{ margin-bottom:10px; }
  .r3d__body{ margin-top:10px; font-size:.82rem; line-height:1.42; }
  .r3d__support{ margin-top:8px; font-size:.78rem; }
  .r3d__svc{ margin-top:10px; font-size:.6rem; }
}