/* =============================================================================
   PlotPDFPro signature animation (ACP-DESIGN-001B)

   The rule this file exists to keep: ONLY `transform` and `opacity` are ever animated. Neither can
   invalidate layout, so no frame of this animation can cause a reflow no matter how many fragments
   are on screen. Every position was computed on the server and arrives as a custom property; the
   browser interpolates between numbers it was handed and does no work of its own.

   Deliberately NOT used:
     - `will-change`. On a few elements it promotes a layer; on four hundred it asks the compositor
       for four hundred layers and the memory cost is worse than the paint it saves.
     - Filters, blurs and shadows. All of them force a repaint of the region every frame.
     - Any JavaScript. There is no rAF loop to fall behind and nothing to schedule.

   Colour and length live in tokens.css, as everywhere else.
   ============================================================================= */

.pp-signature {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Behind the words, always. The hero must be readable if this never renders at all. */
  z-index: var(--z-base);
  pointer-events: none;
  contain: strict;
}

.pp-signature__canvas {
  width: 100%;
  height: 100%;
  display: block;
  /* One stroke colour and one pen weight for the whole drawing — the symbols carry no colour of
     their own, exactly so this is the only place it is decided. */
  fill: none;
  stroke: var(--signature-line);
  stroke-width: var(--signature-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The vortex turns as a single group. One animation for the rotation of the whole cloud, rather than
   several hundred fragments each computing an orbit. It comes to rest at a full turn, so the plan
   forms in true orientation rather than at whatever angle the rotation happened to stop at. */
.pp-signature__vortex {
  transform-origin: 600px 360px;
  /* --ease-heavy, not --ease-standard (ACP-DESIGN-001C). The standard curve lets go immediately,
     which makes a cloud this size read as weightless. The heavy curve is reluctant to start and
     long to settle — the difference between a drawing being moved and a drawing drifting. */
  animation-duration: var(--signature-cycle);
  animation-timing-function: var(--ease-heavy);
  animation-iteration-count: infinite;
}

/* Each plane is carried further than the one behind it. Every sweep is a whole number of turns, so
   whichever plane a fragment belongs to it arrives square and the plan forms true.

   The resting scale is below 1 on purpose. The canvas is cropped to fill (`slice`), so a drawing that
   used the full 1200×720 would lose its outermost marks — the grid bubbles and the dimension strings,
   which are exactly the marks that make it read as a drawing rather than a diagram. */
.pp-signature__vortex--far {
  animation-name: pp-signature-vortex-far;
  opacity: var(--depth-far-opacity);
  stroke-width: var(--depth-far-stroke);
}

.pp-signature__vortex--middle {
  animation-name: pp-signature-vortex-mid;
  opacity: var(--depth-mid-opacity);
  stroke-width: var(--depth-mid-stroke);
}

.pp-signature__vortex--near {
  animation-name: pp-signature-vortex-near;
  opacity: var(--depth-near-opacity);
  stroke-width: var(--depth-near-stroke);
}

@keyframes pp-signature-vortex-far {
  0%   { transform: rotate(0deg) scale(1.03); }
  30%  { transform: rotate(calc(var(--depth-far-sweep) * 0.58)) scale(0.99); }
  46%  { transform: rotate(var(--depth-far-sweep)) scale(0.92); }
  84%  { transform: rotate(var(--depth-far-sweep)) scale(0.92); }
  100% { transform: rotate(var(--depth-far-sweep)) scale(0.95); }
}

@keyframes pp-signature-vortex-mid {
  0%   { transform: rotate(0deg) scale(1.02); }
  30%  { transform: rotate(calc(var(--depth-mid-sweep) * 0.58)) scale(0.97); }
  46%  { transform: rotate(var(--depth-mid-sweep)) scale(0.9); }
  84%  { transform: rotate(var(--depth-mid-sweep)) scale(0.9); }
  100% { transform: rotate(var(--depth-mid-sweep)) scale(0.93); }
}

@keyframes pp-signature-vortex-near {
  0%   { transform: rotate(0deg) scale(1.01); }
  30%  { transform: rotate(calc(var(--depth-near-sweep) * 0.58)) scale(0.96); }
  46%  { transform: rotate(var(--depth-near-sweep)) scale(0.9); }
  84%  { transform: rotate(var(--depth-near-sweep)) scale(0.9); }
  100% { transform: rotate(var(--depth-near-sweep)) scale(0.92); }
}

/* Each fragment rotates about its own middle rather than swinging around the canvas origin, which is
   what `fill-box` buys: the transform origin becomes the element's own centre. */
.pp-signature__part {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: var(--signature-cycle);
  animation-timing-function: var(--ease-heavy);
  animation-iteration-count: infinite;
  animation-delay: var(--delay);
  animation-fill-mode: both;
  opacity: 0;
}

/* ---------------------------------------------------------------- act 1-2: the drift cloud
   Fragments that never join the drawing. They hold their place, turn slowly, and are gone before the
   plan reads — the difference between "a drawing coming apart" and "a diagram assembling itself". */
.pp-signature__part--drift {
  animation-name: pp-signature-drift;
}

@keyframes pp-signature-drift {
  0%   { transform: translate(var(--vx), var(--vy)) rotate(var(--vr)); opacity: 0; }
  6%   { opacity: var(--o); }
  30%  { transform: translate(var(--vx), var(--vy)) rotate(calc(var(--vr) + 26deg)); opacity: var(--o); }
  44%  { opacity: 0; }
  100% { transform: translate(var(--vx), var(--vy)) rotate(calc(var(--vr) + 40deg)); opacity: 0; }
}

/* ---------------------------------------------------------------- act 3: the floor plan
   Arrives out of the vortex, holds while the plan is legible, and leaves when the drawing turns to
   face the viewer. Everything that only made sense from above goes at this point. */
.pp-signature__part--plan {
  animation-name: pp-signature-plan;
}

@keyframes pp-signature-plan {
  0%   { transform: translate(var(--vx), var(--vy)) rotate(var(--vr)); opacity: 0; }
  7%   { opacity: 1; }
  30%  { transform: translate(var(--vx), var(--vy)) rotate(var(--vr)); opacity: 1; }
  46%  { transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  58%  { transform: translate(var(--px), var(--py)) rotate(var(--pr)); opacity: 1; }
  70%  { transform: translate(var(--px), var(--py)) rotate(var(--pr)); opacity: 0; }
  100% { transform: translate(var(--px), var(--py)) rotate(var(--pr)); opacity: 0; }
}

/* ---------------------------------------------------------------- act 4: through to the elevation
   The fragments that were structure in plan — outside walls, the columns on the grid, the windows —
   are the ones that become structure in elevation. That continuity is the whole point of the phase:
   it is the same building, turned, not a second drawing fading in over the first. */
.pp-signature__part--carry {
  animation-name: pp-signature-carry;
}

@keyframes pp-signature-carry {
  0%   { transform: translate(var(--vx), var(--vy)) rotate(var(--vr)); opacity: 0; }
  7%   { opacity: 1; }
  30%  { transform: translate(var(--vx), var(--vy)) rotate(var(--vr)); opacity: 1; }
  46%  { transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  58%  { transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  72%  { transform: translate(var(--ex), var(--ey)) rotate(var(--er)); }
  84%  { transform: translate(var(--ex), var(--ey)) rotate(var(--er)); opacity: 1; }
  94%  { transform: translate(var(--ex), var(--ey)) rotate(var(--er)); opacity: 0; }
  100% { transform: translate(var(--ex), var(--ey)) rotate(var(--er)); opacity: 0; }
}

/* ---------------------------------------------------------------- act 5: what is left
   Structure. It is drawn a little heavier from the start, and it is the last thing on screen — the
   simplification at the end is not a fade-to-nothing but a reduction to the lines that were holding
   the drawing up the whole time. */
.pp-signature__part--essential {
  animation-name: pp-signature-essential;
  stroke: var(--signature-line-strong);
  stroke-width: var(--signature-stroke-strong);
}

@keyframes pp-signature-essential {
  0%   { transform: translate(var(--vx), var(--vy)) rotate(var(--vr)); opacity: 0; }
  7%   { opacity: 1; }
  30%  { transform: translate(var(--vx), var(--vy)) rotate(var(--vr)); opacity: 1; }
  46%  { transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  58%  { transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
  72%  { transform: translate(var(--ex), var(--ey)) rotate(var(--er)); }
  90%  { transform: translate(var(--ex), var(--ey)) rotate(var(--er)); opacity: 1; }
  100% { transform: translate(var(--ex), var(--ey)) rotate(var(--er)); opacity: 0; }
}

/* ---------------------------------------------------------------- responsive
   The frame is cropped, not shrunk (`preserveAspectRatio="slice"`), so a wall on a phone is drawn at
   the same weight and the same scale as on a desktop — it is a closer view of the same sheet, not a
   miniature of it. Detail is removed by tier rather than scaled into illegibility. */
.pp-signature__part--tier1,
.pp-signature__part--tier2 { display: none; }

/* Portrait on a phone, squarer on a tablet, cinematic on a desktop — three different framings of the
   same sheet rather than one framing at three sizes. */
.pp-landing__hero { aspect-ratio: var(--signature-aspect-mobile); }

@media (min-width: 768px) {
  .pp-signature__part--tier1 { display: inline; }
  .pp-landing__hero { aspect-ratio: var(--signature-aspect-tablet); }
}

@media (min-width: 1024px) {
  .pp-signature__part--tier2 { display: inline; }
  .pp-landing__hero { aspect-ratio: var(--signature-aspect); }
}

/* A short viewport — a phone held sideways, or a laptop with browser chrome eating the window — is
   the case a min-height gets wrong. Measured at 797×375: the hero stood 561px tall and pushed the
   only decision on the page below the fold, so the first thing a visitor saw was a drawing they had
   to scroll past. Height here is governed by the window, not by the drawing. */
@media (max-height: 620px) {
  /* The hero is still governed by its aspect ratio — removing that let it grow to the full height of
     everything it contains, which was 894px and worse than the problem. What is removed is the 520px
     floor, which is what forced a tall box into a short window. */
  .pp-landing__hero { min-block-size: 0; }

  /* At 375px of height, an eyebrow, a three-line hero headline, a subtitle and a pair of buttons do
     not fit, and no amount of tightening makes them. What is achievable is that the headline and the
     first action are reachable in a short scroll rather than a long one, so the vertical padding and
     the headline size both come down and the drawing gives up its share of the space first. */
  .pp-landing { min-height: 0; padding-block: var(--space-4); }
  .pp-landing__center--hero { padding-block: var(--space-3); }
  .pp-landing__headline { font-size: var(--type-display-size); line-height: var(--type-display-line); }
  .pp-landing__actions--hero { margin-block-start: var(--space-4); }
  .pp-landing__center--hero .pp-landing__tagline { margin-block-start: var(--space-3); }
}

/* ---------------------------------------------------------------- reduced motion
   NOT simply "animation: none". The global reduced-motion rule collapses every animation to 1ms,
   and with fill-mode both that would land this composition on its LAST keyframe — which is fully
   faded out. A hero that renders nothing is worse than one that moves.

   So the animation is cancelled outright and the drawing is placed, statically, at its floor plan:
   the same composition, at the moment it is most legible, with the drift cloud still behind it. */
@media (prefers-reduced-motion: reduce) {
  .pp-signature__vortex {
    animation: none;
    /* The resting scale, not `none`. At scale 1 the drawing is cropped and loses its outermost
       marks — so the static composition would be a worse drawing than the moving one, which is
       exactly backwards. The depth planes keep their opacity, so the still image has depth too. */
    transform: scale(0.9);
  }

  .pp-signature__part {
    animation: none;
    transform: translate(var(--px), var(--py)) rotate(var(--pr));
    opacity: 1;
  }

  .pp-signature__part--drift {
    transform: translate(var(--vx), var(--vy)) rotate(var(--vr));
    opacity: var(--o);
  }
}

/* Some people ask for less transparency rather than less motion; the drawing is a background, and a
   background that competes with the words it sits behind is a failure either way. */
@media (prefers-reduced-transparency: reduce) {
  .pp-signature__part--drift { opacity: 0; }
}

/* =============================================================================
   SHEET ATMOSPHERE (ACP-DESIGN-001C)

   The page should feel like a drawing sheet rather than a white rectangle, and it should be almost
   impossible to say why. No texture bitmap, no paper photograph, no grunge, no sepia, no blueprint
   blue — every one of those is a costume rather than a quality.

   What is here instead: a grid at 2.8% on the same 64-unit module the drawing itself is built from,
   and a wash at 3.5% pulling the corners down. The page and the drawing therefore share a grid, and
   that correspondence is felt rather than seen. Both are gradients, so there is nothing to download
   and nothing to decode.
   ============================================================================= */
.pp-sheet {
  position: relative;
  isolation: isolate;
}

.pp-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--sheet-line) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--sheet-line) var(--hairline), transparent var(--hairline));
  background-size: var(--sheet-grid-size) var(--sheet-grid-size);
  opacity: var(--sheet-grid-opacity);
}

.pp-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background-image: radial-gradient(ellipse at center, transparent 45%, var(--sheet-shade) 100%);
  opacity: var(--sheet-vignette-opacity);
}

/* Everything the sheet contains sits above the wash. */
.pp-sheet > * { position: relative; z-index: var(--z-raised); }

/* =============================================================================
   REGISTRATION MARKS (ACP-DESIGN-001C)

   The corner marks a plotter leaves in the margin of a sheet. They are drawn at the border colour
   and are perhaps two hundred pixels of line in total — the intent is that a visitor notices them on
   a second or third visit, or never, and that the page feels correct either way.

   Marks are decorative and carry no meaning that is not already in the text, so they are hidden from
   assistive technology and built from borders rather than elements of their own.
   ============================================================================= */
.pp-marks { position: relative; }

.pp-marks::before,
.pp-marks::after {
  content: "";
  position: absolute;
  inline-size: var(--sheet-mark-length);
  block-size: var(--sheet-mark-length);
  pointer-events: none;
  opacity: var(--opacity-muted);
}

/* Outside the content, not inside it. A registration mark sits in the margin of a sheet; one placed
   within the text block would be an ornament sitting on the work. */
.pp-marks::before {
  inset-block-start: calc(var(--sheet-mark-inset) * -1);
  inset-inline-start: calc(var(--sheet-mark-inset) * -1);
  border-block-start: var(--hairline) solid var(--sheet-line);
  border-inline-start: var(--hairline) solid var(--sheet-line);
}

.pp-marks::after {
  inset-block-end: calc(var(--sheet-mark-inset) * -1);
  inset-inline-end: calc(var(--sheet-mark-inset) * -1);
  border-block-end: var(--hairline) solid var(--sheet-line);
  border-inline-end: var(--hairline) solid var(--sheet-line);
}

/* A construction line: the faint rule a drawing is set out against, used to open a section. It stops
   short of full width so it reads as a reference rather than as a divider. */
.pp-rule {
  border: 0;
  block-size: var(--hairline);
  inline-size: var(--space-8);
  margin: 0 0 var(--space-4);
  background-color: var(--border-strong);
  opacity: var(--opacity-subtle);
}

/* =============================================================================
   SCROLL REVEAL (ACP-DESIGN-001C)

   A section lifts slightly as it enters. Three rules make this safe rather than the usual
   scroll-animation liability:

   1. The DEFAULT state is fully visible. The reveal is added by @supports, so a browser without
      scroll-driven animations shows finished content — the text is never waiting on an effect, and
      nothing can leave the page blank if the feature is missing.
   2. It is driven by `animation-timeline: view()`, so there is no scroll listener, no
      IntersectionObserver and no JavaScript. Nothing runs per scroll event.
   3. The range ends well before the section is centred, so the movement is over by the time anyone
      is reading. An animation that is still finishing while you read is a delay, not a polish.
   ============================================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pp-reveal {
      animation: pp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }

    @keyframes pp-reveal {
      from { opacity: 0; transform: translateY(var(--space-4)); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* Smooth section-to-section movement for the in-page anchor, and never for someone who asked for
   less motion — a hijacked scroll is the most disorienting thing a page can do to them. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* =============================================================================
   PRINT (ACP-DESIGN-002)

   A printed page from this product is nearly always a legal document or a conversion record that
   someone needs on paper or in a PDF for their own files. It is a document, not a screenshot of a
   website.

   Before this, print CSS hid two decorative layers and nothing else — so a printed legal page
   carried four hundred SVG drawing fragments frozen at whatever moment the print dialog opened,
   plus the sheet grid, the vignette, the registration marks and the site chrome. Several pages of
   ink for nothing.
   ============================================================================= */
@media print {
  /* Decoration does not print. None of it carries meaning that is not also in the text. */
  .pp-signature,
  .pp-sheet::before,
  .pp-sheet::after,
  .pp-marks::before,
  .pp-marks::after,
  .pp-rule,
  .pp-skeleton {
    display: none !important;
  }

  /* Site chrome is navigation, and navigation is meaningless on paper. */
  .pp-header,
  .pp-footer,
  .pp-skip-link,
  .pp-theme-toggle,
  .pp-toast-region {
    display: none !important;
  }

  /* Print on white regardless of the theme on screen. Dark mode sends a black page to the printer,
     which is both unreadable and an act of hostility toward whoever owns the toner. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --surface-canvas: var(--print-paper);
    --surface-default: var(--print-paper);
    --surface-raised: var(--print-paper);
    --surface-sunken: var(--print-paper);
    --text-primary: var(--print-ink);
    --text-secondary: var(--print-ink-secondary);
    --text-tertiary: var(--print-ink-tertiary);
    --border-default: var(--print-rule);
    --border-subtle: var(--print-rule-subtle);
    --border-strong: var(--print-rule-strong);
    --elevation-1: none;
    --elevation-2: none;
    --elevation-3: none;
  }

  body {
    background: var(--print-paper);
    color: var(--print-ink);
  }

  /* The hero collapses to its text. Its height is set for a screen, not for a sheet of A4. */
  .pp-landing__hero {
    aspect-ratio: auto;
    min-block-size: 0;
    display: block;
  }

  .pp-landing { display: block; min-height: 0; padding: 0; }

  /* Legal documents are the thing most likely to be printed, and the thing most likely to be
     printed badly. A heading stranded at the foot of a page, or two lines of a clause carried alone
     onto the next, is what makes a printed policy look unofficial. */
  h1, h2, h3 { break-after: avoid-page; page-break-after: avoid; }
  p, li, tr, dd, dt { break-inside: avoid-page; page-break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }

  .pp-legal > h2 { break-before: auto; margin-block-start: var(--space-5); }

  /* A table that scrolls on screen has nowhere to scroll on paper. */
  .pp-table-scroll { overflow: visible !important; border: 0; }
  .pp-table thead { display: table-header-group; }

  /* Deferred sections must be realised, or a printed page loses whatever had not scrolled into
     view — silently, and only sometimes. */
  .pp-steps,
  [style*="content-visibility"] {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  /* A link is useless on paper unless its destination is written out. Internal anchors and
     javascript targets are excluded, because printing "#nasil-calisir" helps nobody. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--type-caption-size);
    color: var(--print-ink-tertiary);
    word-break: break-all;
  }

  /* Nothing animates on paper. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}