/* ============================================================
   DAYANA PORTFOLIO GATE, overlay
   ============================================================

   EVERY rule in this file is scoped under .dpg-overlay. That is not
   tidiness, it is a requirement: in the reveal state this stylesheet
   loads on top of the live site, and a single unscoped selector (a
   reset, an html or body rule, a bare `img`) would restyle the theme.
   The only unscoped things allowed here are the @keyframes and the
   .dpg-fonts-loading rule, which is namespaced.

   The lock screen owes nothing to the site. It does not reproduce the
   homepage hero, it shares no grid, no container and no art geometry,
   and none of the numbers below need to match anything. Tune them
   freely.

   Values marked PROVISIONAL were measured off the 2x Figma export
   rather than read from Dev Mode.
   ============================================================ */

.dpg-overlay {
  --dpg-font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dpg-font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --dpg-ink: #131333;
  --dpg-body-ink: #1D1D4C;
  --dpg-line-ink: #DFDFFF;

  /* ---- Form palette, all Dev Mode ---- */
  --dpg-field-border: #8180FD;
  --dpg-field-bg: #FFF;
  --dpg-field-bg-hover: #F7F7FF;
  --dpg-field-ink-empty: #74757F;        /* placeholder, 4.57:1 on white */
  --dpg-field-ink-empty-hover: #70717A;  /* 4.55:1 on #F7F7FF */
  --dpg-field-ink-filled: #1D1D4C;
  --dpg-field-border-error: #D76F6F;
  --dpg-shadow-sm: 0 4px 12px 0 rgba(39, 38, 101, 0.08);

  --dpg-btn-bg: #6160FD;
  --dpg-btn-bg-hover: #5756E4;
  --dpg-btn-bg-busy: #DFDFFF;            /* the Dev Mode disabled fill,
                                            reused for the in-flight state */
  --dpg-btn-ink: #FFF;
  --dpg-btn-ring: rgba(97, 96, 253, 0.5);
  /* Only weights the font request actually loads may be used. Geist is
     300/400/500. Asking for 600 makes every browser synthesise a bold,
     and synthetic bold is rasterised differently on every platform,
     which is what made this button read heavier on Windows than on iOS. */
  --dpg-btn-weight: 500;

  --dpg-error-bg: #FFE6E6;
  --dpg-error-ink: #984F4F;              /* 4.97:1 on #FFE6E6, passes AA */

  /* ---- Layout ---- */
  --dpg-row-w: 477px;                    /* field + gap + button, Dev Mode */
  --dpg-row-gap: 16px;                   /* PROVISIONAL, measured 14.5 */
  --dpg-logo-top: 102px;                 /* PROVISIONAL, measured */
  --dpg-logo-h: 28px;                    /* PROVISIONAL, measured */
  --dpg-logo-gap: 120px;                 /* PROVISIONAL, logo to heading */
  --dpg-heading-gap: 16px;               /* PROVISIONAL, heading to sub */
  --dpg-sub-gap: 48px;                   /* Dev Mode, sub to field */
  --dpg-error-gap: 24px;                 /* Dev Mode, field to error */

  /* ---- Type ----
     No Dev Mode was ever sent for the heading and subheading. Both sizes
     are measured off the 2x export by ink height, accurate to about a
     pixel; the WEIGHT and LINE HEIGHT below are inferred and remain the
     two values most likely to need correcting. */
  --dpg-heading-size: 26px;              /* PROVISIONAL, measured */
  --dpg-heading-lh: 34px;                /* PROVISIONAL, inferred */
  --dpg-heading-weight: 600;             /* PROVISIONAL, inferred */
  --dpg-sub-size: 16px;                  /* measured, matches Body/md */
  --dpg-sub-lh: 24px;
  --dpg-sub-weight: 400;

  /* ---- Hairlines ----
     Positions come straight from the 1440x805 export. The two verticals
     sit symmetrically about the centre; the export has them 620 apart
     centred four pixels left of centre, which is treated as a Figma
     imprecision and squared up.

     Three horizontals are measured from the TOP and two from the BOTTOM,
     which is how the design reads them (62 and 164 belong to the logo,
     the lower three to the foot of the frame). Anchoring each to the
     edge it belongs to is what keeps the composition right at any window
     height, where fixed pixels from the top would only be correct at
     805. */
  --dpg-v-offset: 310px;
  --dpg-h-top-1: 62px;
  --dpg-h-top-2: 164px;
  --dpg-h-bot-3: 233px;
  --dpg-h-bot-4: 129px;
  --dpg-h-bot-5: 64px;

  /* ---- Artwork ----
     One flat image. It was produced by compositing what the previous
     build assembled live (the lit gradient ellipse, its grain, and the
     six bird layers under colour-burn) into a single file, so it looks
     the same and costs one request instead of eight with no blend modes,
     no inline SVG and no filters.

     Three numbers, coupled to nothing. Size is the width; the height
     follows from the file. The min() keeps it from overwhelming a short
     window, exactly as a background image would. */
  --dpg-art-size: min(40.9vw, 72.5svh);
  --dpg-art-right: 0.6vw;
  --dpg-art-top: calc(var(--dpg-art-size) * -0.194);

  /* ---- Motion ----
     Every line is DRAWN, from one end to the other, and leaves by
     retreating back the way it came. Nothing fades. The direction is
     carried by each line's transform-origin, alternating so the grid
     assembles as a hand would draw it rather than as one event. */
  --dpg-draw-ms: 420ms;
  --dpg-draw-ease: cubic-bezier(0.33, 1, 0.68, 1);     /* out, settles */
  --dpg-undraw-ease: cubic-bezier(0.32, 0, 0.67, 0);   /* in, accelerates */
  --dpg-stagger: 240ms;                                /* last line's head start */

  --dpg-copy-ms: 320ms;
  --dpg-copy-delay: 120ms;

  /* Must be at least --dpg-stagger + --dpg-draw-ms (660ms), or the
     reload cuts the lines off mid-stroke. gate.js reads it. */
  --dpg-unlock-ms: 700ms;

  --dpg-dissolve-ms: 500ms;
  --dpg-dissolve-delay: 120ms;

  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #fff;
  font-family: var(--dpg-font-body);
  color: var(--dpg-ink);
  /* No faux bold or faux italic. If a weight is ever asked for that the
     loaded faces do not provide, the browser falls back to the nearest
     real one instead of smearing it, which is the only part of
     cross-platform weight consistency that CSS actually controls. */
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

/* The reveal copy sits on top of the live site, so it needs to win
   against whatever the theme stacks. This is the one z-index in the
   plugin and it exists only in this state; the locked document has
   nothing to stack against. */
.dpg-overlay--reveal {
  z-index: 2147483000;
  pointer-events: none;
}

/* On a short window (a laptop with a lot of browser chrome, or a phone
   in landscape) the lockup plus the form is taller than the viewport.
   Clipping the button would be a dead end, so the locked state scrolls
   vertically. Horizontal stays hidden, which is what keeps the artwork
   from adding a sideways scrollbar where it bleeds past the edge. */
.dpg-overlay--locked {
  overflow-x: hidden;
  overflow-y: auto;
}

/* ============================================================
   1. ARTWORK
   ============================================================ */

.dpg-overlay__art { position: absolute; inset: 0; pointer-events: none; }

.dpg-overlay__art img {
  position: absolute;
  top: var(--dpg-art-top);
  right: var(--dpg-art-right);
  width: var(--dpg-art-size);
  height: auto;
  max-width: none;   /* themes commonly set img { max-width: 100% } */
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   2. HAIRLINES

   Each line is a 1px box at full length, held at scale 0 until it is
   drawn. transform-origin is the end the pencil starts from, so
   scaleX/scaleY 0 to 1 draws it away from that end and 1 to 0 retracts
   it back into the same end. Directions alternate deliberately: the
   brief was that no two neighbouring lines run the same way.
   ============================================================ */

.dpg-overlay__lines { position: absolute; inset: 0; pointer-events: none; }

.dpg-overlay .dpg-line {
  position: absolute;
  background: var(--dpg-line-ink);
  will-change: transform;
}

.dpg-overlay .dpg-line--v { top: 0; bottom: 0; width: 1px; transform: scaleY(0); }
.dpg-overlay .dpg-line--h { left: 0; right: 0; height: 1px; transform: scaleX(0); }

/*  line   position                        drawn            order */
.dpg-overlay .dpg-line--v-1 { left: calc(50% - var(--dpg-v-offset)); transform-origin: 50% 0;   --dpg-i: 0; }
.dpg-overlay .dpg-line--v-2 { left: calc(50% + var(--dpg-v-offset)); transform-origin: 50% 100%; --dpg-i: 1; }
.dpg-overlay .dpg-line--h-1 { top: var(--dpg-h-top-1);    transform-origin: 0 50%;   --dpg-i: 2; }
.dpg-overlay .dpg-line--h-2 { top: var(--dpg-h-top-2);    transform-origin: 100% 50%; --dpg-i: 3; }
.dpg-overlay .dpg-line--h-3 { bottom: var(--dpg-h-bot-3); transform-origin: 0 50%;   --dpg-i: 4; }
.dpg-overlay .dpg-line--h-4 { bottom: var(--dpg-h-bot-4); transform-origin: 100% 50%; --dpg-i: 5; }
.dpg-overlay .dpg-line--h-5 { bottom: var(--dpg-h-bot-5); transform-origin: 0 50%;   --dpg-i: 6; }

/* The stagger, derived rather than typed out seven times. Going out, the
   order reverses: the line that arrived last leaves first, so the exit
   reads as the drawing being undone rather than repeated. */
.dpg-overlay .dpg-line {
  --dpg-in-delay: calc(var(--dpg-stagger) / 6 * var(--dpg-i));
  --dpg-out-delay: calc(var(--dpg-stagger) - var(--dpg-in-delay));
}

.dpg-overlay--locked .dpg-line--v {
  animation: dpg-draw-v var(--dpg-draw-ms) var(--dpg-draw-ease) var(--dpg-in-delay) both;
}
.dpg-overlay--locked .dpg-line--h {
  animation: dpg-draw-h var(--dpg-draw-ms) var(--dpg-draw-ease) var(--dpg-in-delay) both;
}

.dpg-overlay--locked.is-unlocking .dpg-line--v {
  animation: dpg-undraw-v var(--dpg-draw-ms) var(--dpg-undraw-ease) var(--dpg-out-delay) both;
}
.dpg-overlay--locked.is-unlocking .dpg-line--h {
  animation: dpg-undraw-h var(--dpg-draw-ms) var(--dpg-undraw-ease) var(--dpg-out-delay) both;
}

@keyframes dpg-draw-v   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dpg-draw-h   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dpg-undraw-v { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes dpg-undraw-h { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ============================================================
   3. LAYOUT AND TYPE
   ============================================================ */

.dpg-overlay__content {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--dpg-logo-top);
  padding-bottom: 48px;
  padding-inline: clamp(20px, 3vw, 24px);
}

/* The copy leaves before the reload, so the last frame of the lock
   screen is a plain white field with the artwork on it, which is exactly
   what the first frame after the reload shows. */
.dpg-overlay--locked .dpg-overlay__content {
  transition: opacity var(--dpg-copy-ms) ease var(--dpg-copy-delay);
}
.dpg-overlay--locked.is-unlocking .dpg-overlay__content { opacity: 0; }

.dpg-overlay .dpg-logo { flex: none; height: var(--dpg-logo-h); }

.dpg-overlay .dpg-logo img {
  display: block;
  height: var(--dpg-logo-h);
  width: auto;
  max-width: none;
}

.dpg-overlay .dpg-logo__text {
  font-family: var(--dpg-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: var(--dpg-logo-h);
  color: var(--dpg-ink);
}

.dpg-overlay .dpg-panel {
  flex: none;
  width: var(--dpg-row-w);
  max-width: 100%;
  margin-top: var(--dpg-logo-gap);
  text-align: center;
}

.dpg-overlay .dpg-heading {
  margin: 0;
  font-family: var(--dpg-font-heading);
  font-size: var(--dpg-heading-size);
  line-height: var(--dpg-heading-lh);
  font-weight: var(--dpg-heading-weight);
  color: var(--dpg-ink);
  letter-spacing: normal;
}

.dpg-overlay .dpg-sub {
  margin: var(--dpg-heading-gap) 0 0;
  font-family: var(--dpg-font-body);
  font-size: var(--dpg-sub-size);
  line-height: var(--dpg-sub-lh);
  font-weight: var(--dpg-sub-weight);
  color: var(--dpg-body-ink);
}

.dpg-overlay .dpg-help {
  margin: 24px 0 0;
  font-family: var(--dpg-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--dpg-body-ink);
}

.dpg-overlay .dpg-help a { color: var(--dpg-ink); text-decoration: underline; text-underline-offset: 3px; }
.dpg-overlay .dpg-help a:hover { color: #4A4290; }

.dpg-overlay .dpg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Held invisible until the webfonts have loaded, so the copy is painted
   once rather than in the fallback stack and then again in Poppins and
   Geist. The class is set and cleared by the inline script in the locked
   document; visibility rather than display keeps the text in layout, so
   the fonts are still requested. */
.dpg-fonts-loading .dpg-overlay__content { visibility: hidden; }

/* ============================================================
   4. FORM
   ============================================================ */

.dpg-overlay .dpg-form { margin-top: var(--dpg-sub-gap); }

.dpg-overlay .dpg-row {
  display: flex;
  align-items: center;
  gap: var(--dpg-row-gap);
}

/* The box carries the border, fill, shadow and height; the <input> inside
   is transparent and borderless. That is what lets the eye button sit
   inside the frame and lets :focus-within style the whole control.

   Dev Mode says padding 24px 16px 24px 24px on a 64px box. Vertical
   padding of 24 top and bottom inside a fixed 64px box leaves 14px for a
   24px line, so the text would not fit. Flex centring renders
   identically and cannot overflow. Horizontal padding is as specified. */
.dpg-overlay .dpg-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  height: 64px;
  padding: 0 16px 0 24px;
  border-radius: 8px;
  border: 1px solid var(--dpg-field-border);
  background: var(--dpg-field-bg);
  box-shadow: var(--dpg-shadow-sm);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.dpg-overlay .dpg-field:hover { background: var(--dpg-field-bg-hover); }

/* Dev Mode focus is a 3px border. A 3px border inside a border-box of
   fixed height eats 2px of the content area per side and shifts the
   value sideways on focus. A 2px inset ring on top of the 1px border is
   the same 3px of colour with no layout movement. */
.dpg-overlay .dpg-field:focus-within {
  box-shadow: inset 0 0 0 2px var(--dpg-field-border), var(--dpg-shadow-sm);
}

.dpg-overlay .dpg-field.is-error { border-color: var(--dpg-field-border-error); }

.dpg-overlay .dpg-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--dpg-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--dpg-field-ink-filled);
}

.dpg-overlay .dpg-input::placeholder { color: var(--dpg-field-ink-empty); opacity: 1; }
.dpg-overlay .dpg-field:hover .dpg-input::placeholder { color: var(--dpg-field-ink-empty-hover); }

/* Chrome paints its own autofill background over the field fill. */
.dpg-overlay .dpg-input:-webkit-autofill,
.dpg-overlay .dpg-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dpg-field-ink-filled);
  transition: background-color 100000s ease 0s;
}

/* Icon is 24px as designed; the padding and matching negative margin
   grow the hit area to 44x44 (WCAG 2.2 target size) without changing
   anything visible or the 16px gap to the right edge. */
.dpg-overlay .dpg-eye {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 10px;
  margin: -10px -10px -10px 0;
  box-sizing: content-box;
  border: 0;
  background: none;
  color: var(--dpg-btn-bg);
  cursor: pointer;
  border-radius: 6px;
}

.dpg-overlay .dpg-eye svg { display: block; width: 24px; height: 24px; grid-area: 1 / 1; }
.dpg-overlay .dpg-eye .dpg-eye__hide { display: none; }
.dpg-overlay .dpg-eye[aria-pressed="true"] .dpg-eye__show { display: none; }
.dpg-overlay .dpg-eye[aria-pressed="true"] .dpg-eye__hide { display: block; }

.dpg-overlay .dpg-eye:hover { color: var(--dpg-btn-bg-hover); }
.dpg-overlay .dpg-eye:focus-visible { outline: 3px solid var(--dpg-btn-ring); outline-offset: 0; }

.dpg-overlay .dpg-submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 64px;
  padding: 0 24px;
  border-radius: 8px;
  border: 1px solid var(--dpg-btn-bg);
  background: var(--dpg-btn-bg);
  box-shadow: var(--dpg-shadow-sm);
  color: var(--dpg-btn-ink);
  font-family: var(--dpg-font-body);
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--dpg-btn-weight);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.dpg-overlay .dpg-submit:hover,
.dpg-overlay .dpg-submit:active {
  background: var(--dpg-btn-bg-hover);
  border-color: var(--dpg-btn-bg-hover);
}

/* Dev Mode focus was a 3px inner border in rgba(97,96,253,.5) ON the same
   #6160FD fill. Composited that is exactly #6160FD: a 1.00:1 ring,
   invisible. Moved outside the button, where it sits on white. */
.dpg-overlay .dpg-submit:focus-visible {
  outline: 3px solid var(--dpg-btn-ring);
  outline-offset: 2px;
}

/* In flight. Reuses the Dev Mode disabled fill, which is the only place
   that treatment is still needed now the button is always enabled. */
.dpg-overlay .dpg-submit[aria-busy="true"],
.dpg-overlay .dpg-submit:disabled {
  background: var(--dpg-btn-bg-busy);
  border-color: var(--dpg-btn-bg-busy);
  cursor: default;
}

/* Always in the DOM so role="alert" can announce a change. Hidden by
   :empty rather than [hidden] or display:none on a populated node,
   because a live region removed from the box tree is unreliable across
   screen readers. */
.dpg-overlay .dpg-error {
  display: flex;
  align-items: center;
  justify-content: var(--dpg-error-justify, flex-start);
  gap: 8px;
  width: 100%;
  min-height: 56px;
  margin-top: var(--dpg-error-gap);
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--dpg-error-bg);
  color: var(--dpg-error-ink);
  font-family: var(--dpg-font-heading);
  font-size: 13px;
  /* Dev Mode says `normal`, which resolves to Poppins' own metric and
     drifts slightly per platform. Kept as specified, exposed as a var so
     it can be pinned to a number. */
  line-height: var(--dpg-error-lh, normal);
  font-weight: 500;
  text-align: left;
}

.dpg-overlay .dpg-error:empty { display: none; }
.dpg-overlay .dpg-error__icon { flex: none; width: 20px; height: 20px; }

/* ============================================================
   5. THE REVEAL

   Pure CSS, on purpose. If this depended on JavaScript, a script error
   would leave an opaque white sheet over the site with no way out. The
   animation runs on its own; gate.js only removes the node afterwards,
   which is tidiness rather than function.
   ============================================================ */

.dpg-overlay--reveal {
  animation: dpg-dissolve var(--dpg-dissolve-ms) ease var(--dpg-dissolve-delay) forwards;
}

@keyframes dpg-dissolve {
  from { opacity: 1; visibility: visible; }
  99%  { opacity: 0; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* ============================================================
   6. RESPONSIVE
   No mobile design exists for this screen. Everything below is
   INFERRED and is flagged as such in the handoff.
   ============================================================ */

@media (max-width: 900px) {
  .dpg-overlay {
    --dpg-logo-top: 64px;
    --dpg-logo-gap: 72px;
    --dpg-art-size: min(78vw, 52svh);
    --dpg-art-right: -8vw;
  }

  /* The two verticals sit 620px apart, which no longer fits around a
     single centred column. The horizontals still read, and they are the
     ones carrying the drawing, so they stay. */
  .dpg-overlay .dpg-line--v { display: none; }

  /* Anchored to the foot of the screen instead of hanging off the top,
     so it sits behind and below the form rather than through it. */
  .dpg-overlay__art img { top: auto; bottom: -6svh; }
}

@media (max-width: 600px) {
  .dpg-overlay {
    --dpg-logo-top: 48px;
    --dpg-logo-gap: 56px;
    --dpg-sub-gap: 32px;
  }

  /* The field and the button both stay full width and comfortably
     tappable rather than being squeezed side by side. */
  .dpg-overlay .dpg-row { flex-direction: column; align-items: stretch; }
  .dpg-overlay .dpg-submit { width: 100%; }
}

/* ============================================================
   7. REDUCED MOTION
   The lines are simply there, and the reveal is a short cross-fade
   rather than nothing at all, because an instant swap from a white
   sheet to a full page is harsher than a fade for most people who ask
   for reduced motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .dpg-overlay .dpg-line { animation: none !important; transform: none !important; }
  .dpg-overlay--locked .dpg-overlay__content { transition: none; }
  .dpg-overlay--reveal { animation-duration: 160ms; animation-delay: 0ms; }
}