/* ============================================================================
   Send an angel

   Three rules run through this whole file:
     – nothing is ever pure black or pure white; everything sits on night
     – nothing snaps
     – but the product runs at two speeds. Receiving an angel is a ceremony
       and is slow on purpose. Making one is a task: the sender is trying to
       get something to a person they love, so that half answers quickly.
       `--tap` and `--settle` below are the send flow's whole pacing; the
       arrival's lives in ceremony.js and the two never borrow from each other.

   The angel video is composited onto the sky with `mix-blend-mode: screen`,
   which only ever adds light. Her clips are encoded with their own night
   crushed to true black, so what gets added is her and nothing else: her
   frame corners composite to exactly our night colour. She has no rectangle,
   no edge and no seam – she is genuinely in our sky rather than pasted over
   it, and our stars carry on through her glow.

   For that to work the sky canvas has to live *inside* #stage: blending only
   sees what is painted behind it in the same stacking context, and a
   fixed-position element makes one of those.
   ========================================================================= */

/* ------------------------------- the fonts ------------------------------ */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(fonts/cormorant-garamond-normal-abcaa8.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;
  font-display:swap;src:url(fonts/cormorant-garamond-italic-4db21d.woff2) format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;
  font-display:swap;src:url(fonts/outfit-normal-973124.woff2) format('woff2');}

/* ------------------------------- the tokens ----------------------------- */
:root{
  --night:#0a0c1c;
  --deep:#070912;
  --gold:#f0c47e;
  --gold-soft:#ffe9c2;
  --ink:#f8f4ec;
  --muted:#aeb3d2;
  --dusk:#33395f;

  /* Her colour. Set by ceremony.js the moment an angel is chosen, and used
     by everything: her glow, the light on the words, the meaning line. */
  --ray:255, 246, 230;
  --ray-text:#ffeacb;
  --ray-deep:240, 214, 170;

  /* Where she stands. --angel-y is where her light lands on the screen;
     0.62 is where that light sits inside her own frame. Move --angel-y and
     everything else follows. */
  --angel-w:118vw;
  --angel-h:calc(var(--angel-w) * 1.7741);
  --angel-y:40vh;
  --angel-feather:7%;         /* how far in from her sides she dissolves */

  --breath:5.2s;              /* one slow breath, hers and the light's */

  /* The send flow is not the ceremony. Someone making an angel is doing a
     task and wants it delivered, so this half of the product answers quickly.
     These two are the send flow's whole pacing – the arrival's is in
     ceremony.js and has nothing to do with them. */
  --tap:180ms;                /* the direct answer to a finger */
  --settle:620ms;             /* something changing colour, or opening */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', system-ui, -apple-system, sans-serif;

  --pad-top:calc(env(safe-area-inset-top) + 6vh);
  --pad-bottom:calc(env(safe-area-inset-bottom) + 40px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* `hidden` has to win over any display we set later in this file, or an
   empty element quietly takes up room it should not have. */
[hidden]{display:none !important;}

html{background:var(--night);}
body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* --------------------------------- the sky ------------------------------- */
#sky{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  pointer-events:none;
}

/* A very fine grain over the night. Without it a gradient this dark and this
   large bands into visible stripes on a phone; with it, the night reads as
   film rather than as a computer's idea of a gradient.

   It is CSS rather than canvas on purpose. Generating it on a canvas meant
   filling an offscreen one with random pixels and reading it back as a
   pattern, which looks exactly like device fingerprinting to a browser that
   is watching for it — and Safari, rightly, watches. This does the same job
   with nothing to watch. */
#grain{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------- the stage ------------------------------- */
#stage{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

#angel-wrap{
  position:absolute;
  left:50%;
  top:0;
  width:var(--angel-w);
  height:var(--angel-h);
  transform:translateX(-50%);
  margin-top:calc(var(--angel-y) - var(--angel-h) * 0.62);
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity var(--form-for, 4200ms) cubic-bezier(.35,.05,.35,1);
  /* She has no sides. Whatever the screen is, her edges are gone before
     they reach it, so there is never a rectangle to notice. */
  -webkit-mask-image:linear-gradient(to right,
      rgba(0,0,0,0) 0%, #000 var(--angel-feather),
      #000 calc(100% - var(--angel-feather)), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,
      rgba(0,0,0,0) 0%, #000 var(--angel-feather),
      #000 calc(100% - var(--angel-feather)), rgba(0,0,0,0) 100%);
}
#stage.formed #angel-wrap{opacity:1;}

#angel-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* She does not end at the bottom – she thins out into the sky above the
     words, so her light falls on them rather than stopping at an edge. */
  -webkit-mask-image:linear-gradient(to bottom,
      #000 0%, #000 70%, rgba(0,0,0,.55) 82%, rgba(0,0,0,0) 94%);
  mask-image:linear-gradient(to bottom,
      #000 0%, #000 70%, rgba(0,0,0,.55) 82%, rgba(0,0,0,0) 94%);
}

/* the single point of light, low, that rises and becomes her */
#travel{
  position:absolute;
  left:50%;
  top:92vh;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:radial-gradient(circle,
     #fff 0%, rgba(var(--ray),.95) 32%, rgba(var(--ray),0) 72%);
  box-shadow:0 0 34px 10px rgba(var(--ray),.40);
  opacity:0;
  transform:scale(.3);
  mix-blend-mode:screen;
}
#stage.rising #travel,
#stage.blooming #travel{
  top:var(--angel-y);
  transform:scale(1.1);
  transition:top var(--rise-for, 5000ms) cubic-bezier(.36,.02,.28,1),
             transform var(--rise-for, 5000ms) cubic-bezier(.4,0,.4,1),
             opacity 1700ms ease-out;
}
#stage.rising #travel{opacity:1;}
#stage.blooming #travel{opacity:0;}

/* and the light opens */
#bloom{
  position:absolute;
  left:50%;
  top:var(--angel-y);
  width:min(94vw, 560px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.18);
  background:radial-gradient(circle,
     rgba(255,255,255,.92) 0%,
     rgba(var(--ray),.62) 16%,
     rgba(var(--ray),.20) 40%,
     rgba(var(--ray),0) 70%);
  opacity:0;
  mix-blend-mode:screen;
}
#stage.blooming #bloom{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.12);
  transition:opacity calc(var(--bloom-for, 2600ms) * .32) ease-out,
             transform var(--bloom-for, 2600ms) cubic-bezier(.16,.7,.3,1);
}
#stage.formed #bloom{
  opacity:0;
  transform:translate(-50%,-50%) scale(1.55);
  transition:opacity calc(var(--form-for, 4200ms) * .92) ease-in-out,
             transform var(--form-for, 4200ms) ease-out;
}

/* a few motes of her light, drifting up through everything */
#motes{position:absolute;inset:0;opacity:0;transition:opacity 3s ease;}
#stage.formed #motes,
body[data-view="why"] #motes,
body[data-view="note"] #motes,
body[data-view="share"] #motes{opacity:1;}
.mote{
  position:absolute;
  border-radius:50%;
  background:rgba(var(--ray),.75);
  box-shadow:0 0 8px 2px rgba(var(--ray),.30);
  mix-blend-mode:screen;
  animation:drift linear infinite;
}
@keyframes drift{
  0%  {transform:translateY(0)      translateX(0);    opacity:0;}
  14% {opacity:.55;}
  80% {opacity:.20;}
  100%{transform:translateY(-92vh)  translateX(14px); opacity:0;}
}

/* a scrim so words are always readable, however bright she is */
#scrim{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,
     rgba(10,12,28,0) 0%,
     rgba(10,12,28,0) 42%,
     rgba(10,12,28,.42) 64%,
     rgba(10,12,28,.80) 88%,
     rgba(10,12,28,.92) 100%);
  opacity:0;
  transition:opacity 2.4s ease;
}
body[data-view="receive"] #scrim,
body[data-view="share"] #scrim,
body[data-view="keep"] #scrim{opacity:1;}

/* Once she has arrived she stays for the rest of the visit – but she stands
   back on the screens that are asking someone to read something. */
body[data-view="share"] #stage.formed #angel-wrap,
body[data-view="keep"]  #stage.formed #angel-wrap{
  opacity:.28;
  transition:opacity 2.2s ease;
}

/* --------------------------------- layout -------------------------------- */
main{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  min-height:100dvh;
}

.view{
  display:none;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:480px;
  padding:var(--pad-top) 26px var(--pad-bottom);
  text-align:center;
}
body[data-view="who"]     #v-who,
body[data-view="why"]     #v-why,
body[data-view="note"]    #v-note,
body[data-view="share"]   #v-share,
body[data-view="receive"] #v-receive,
body[data-view="keep"]    #v-keep{display:flex;}

/* the send flow sits in the middle of the night; the arrival does not */
body:not([data-view="receive"]) main{justify-content:center;}

/* ------------------------------- type ------------------------------------ */
.kicker{
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
  line-height:1.9;
  text-shadow:0 1px 16px rgba(10,12,28,.9);
}
.ask{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(29px, 7.4vw, 39px);
  line-height:1.24;
  letter-spacing:.005em;
  text-wrap:balance;
  text-shadow:0 2px 22px rgba(10,12,28,.85);
}
.body{
  margin-top:20px;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  max-width:23em;
  text-shadow:0 1px 16px rgba(10,12,28,.95);
}
.help{
  margin-top:12px;
  font-size:12.5px;
  line-height:1.6;
  color:rgba(174,179,210,.75);
  max-width:24em;
}
.meaning{
  margin-top:24px;
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  letter-spacing:.015em;
  color:var(--ray-text);
  transition:color var(--settle) ease;
  text-shadow:0 1px 16px rgba(10,12,28,.9);
}

/* ------------------------------- controls -------------------------------- */
.field{
  margin-top:5vh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.field label{
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}
input[type=text], textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--dusk);
  color:var(--ink);
  font-family:var(--serif);
  font-size:25px;
  text-align:center;
  padding:10px 6px;
  width:min(86vw, 350px);
  outline:none;
  transition:border-color var(--tap) ease;
  border-radius:0;
}
input[type=text]::placeholder, textarea::placeholder{
  color:rgba(174,179,210,.45);
  font-style:italic;
}
input[type=text]:focus, textarea:focus{border-bottom-color:var(--gold);}

textarea{
  font-style:italic;
  font-size:22px;
  line-height:1.55;
  resize:none;
  overflow:hidden;
  min-height:3.4em;
  /* it grows with what they write, but never so far that the button they
     need next is pushed somewhere they cannot find it */
  max-height:42vh;
}
textarea.full{overflow-y:auto;}
.count{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(174,179,210,.7);
  transition:color var(--settle) ease;
}
.count.near{color:var(--gold-soft);}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:4.5vh;
}
.chip{
  border:1px solid var(--dusk);
  background:rgba(14,17,36,.55);
  color:var(--ink);
  border-radius:999px;
  padding:12px 18px;
  font-family:var(--sans);
  font-weight:300;
  font-size:14.5px;
  cursor:pointer;
  transition:border-color var(--tap) ease, box-shadow var(--tap) ease, color var(--tap) ease;
  display:inline-flex;
  align-items:center;
  gap:9px;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.chip .dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 9px 1px currentColor;
}
.chip[aria-pressed="true"]{
  border-color:rgba(240,196,126,.75);
  box-shadow:0 0 18px rgba(240,196,126,.22);
  color:var(--gold-soft);
}
.more{
  margin-top:20px;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:13.5px;
  letter-spacing:.08em;color:var(--muted);
  border-bottom:1px solid rgba(174,179,210,.3);
  padding-bottom:3px;
}
.own{
  margin-top:26px;
  width:100%;
  display:flex;flex-direction:column;align-items:center;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height var(--settle) ease, opacity var(--settle) ease, margin-top var(--settle) ease;
}
.own.open{max-height:220px;opacity:1;}
.own label{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.own input{font-size:21px;}

.btn{
  margin-top:5vh;
  background:linear-gradient(180deg,#f7d698,#e2ab58);
  color:#241a09;
  border:none;
  border-radius:999px;
  padding:17px 42px;
  font-family:var(--sans);
  font-weight:400;
  font-size:15.5px;
  letter-spacing:.05em;
  cursor:pointer;
  box-shadow:0 6px 34px rgba(240,196,126,.34);
  transition:box-shadow var(--tap) ease, transform var(--tap) ease;
}
.btn:active{transform:scale(.985);}
.btn.small{margin-top:16px;padding:13px 30px;font-size:14px;}
.btn-quiet{
  margin-top:16px;
  background:rgba(10,12,28,.45);
  border:1px solid rgba(240,196,126,.45);
  color:var(--gold-soft);
  border-radius:999px;
  padding:15px 34px;
  font-family:var(--sans);font-weight:300;font-size:14px;letter-spacing:.07em;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.ghost{
  margin-top:18px;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:13px;letter-spacing:.07em;
  color:var(--muted);
}
.ghost:hover{color:var(--gold-soft);}

.share-row{
  margin-top:22px;
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.chip-share{
  border:1px solid rgba(240,196,126,.4);
  background:rgba(10,12,28,.5);
  color:var(--gold-soft);
  border-radius:999px;
  padding:12px 20px;
  font-size:14px;font-weight:300;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.quiet{margin-top:5vh;display:flex;flex-direction:column;align-items:center;gap:2px;}

/* ============================ the arrival ================================= */
#v-receive{
  max-width:none;
  padding:0 26px var(--pad-bottom);
  justify-content:flex-start;
}

.words{
  position:relative;
  width:100%;
  max-width:460px;
  margin:0 auto;
  padding-top:max(50vh, 330px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* her light, falling on the words beneath her – breathing on her own cycle */
.wordlight{
  position:absolute;
  left:50%;
  top:calc(max(50vh, 330px) - 16vh);
  width:150%;
  height:60vh;
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(ellipse 50% 42% at 50% 22%,
      rgba(var(--ray),.20) 0%,
      rgba(var(--ray),.09) 38%,
      rgba(var(--ray),0) 72%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity 3.4s ease;
}
.words.lit .wordlight{
  opacity:1;
  animation:wordbreath var(--breath) ease-in-out infinite;
}
@keyframes wordbreath{
  0%,100%{transform:translateX(-50%) scale(1);   opacity:.78;}
  50%    {transform:translateX(-50%) scale(1.07);opacity:1;}
}

/* every line arrives the same way: out of soft focus, rising, settling */
.line{
  opacity:0;
  transform:translateY(18px);
  filter:blur(8px);
  transition:opacity 1900ms cubic-bezier(.25,.6,.25,1),
             transform 1900ms cubic-bezier(.18,.7,.2,1),
             filter 1900ms ease-out;
}
.line.in{opacity:1;transform:none;filter:none;}

/* A line that has not arrived yet is not there to be tapped. Without this the
   options are invisible but still clickable throughout the arrival, and a
   finger resting where a button is about to appear presses it. */
.line:not(.in){pointer-events:none;}

/* The sender skipping ahead. Everything lands at once and quickly – no
   half-finished light still climbing behind her. Preview only; a received
   angel never gets this class. */
body.settled #travel,
body.settled #bloom{transition:none;opacity:0;}
body.settled #angel-wrap{transition:opacity 320ms ease;}
body.settled .line{transition:opacity 320ms ease, transform 320ms ease, filter 320ms ease;}
body.settled .words.lit .wordlight{transition:opacity 480ms ease;}

.name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(36px, 10vw, 54px);
  line-height:1.1;
  letter-spacing:.01em;
  text-shadow:0 2px 30px rgba(10,12,28,.7);
}
.name:empty{display:none;}
.sent{
  margin-top:26px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 5.4vw, 26px);
  line-height:1.5;
  color:rgba(248,244,236,.94);
  max-width:19em;
  text-wrap:balance;
  text-shadow:0 2px 26px rgba(10,12,28,.75);
}
.stay{
  margin-top:34px;
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(174,179,210,.92);
  line-height:2;
}

.cue{
  margin-top:46px;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:300;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(174,179,210,.8);
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
}
.cue .arrow{
  font-size:15px;
  animation:nudge 3.4s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{transform:translateY(0);opacity:.55;}
  50%    {transform:translateY(5px);opacity:1;}
}

.letter{
  margin-top:46px;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(19px, 4.9vw, 23px);
  line-height:1.78;
  color:rgba(248,244,236,.9);
  max-width:24em;
  white-space:pre-wrap;
  text-shadow:0 2px 24px rgba(10,12,28,.8);
}
.letter:empty{display:none;}
.letter .from{
  display:block;
  margin-top:26px;
  font-style:normal;
  font-size:.82em;
  letter-spacing:.04em;
  color:var(--ray-text);
  transition:color 1.4s ease;
}

.options{
  margin-top:9vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ------------------------------ keepsake --------------------------------- */
.card{
  margin-top:5vh;
  width:min(100%, 350px);
  background:rgba(14,17,36,.72);
  border:1px solid rgba(240,196,126,.42);
  border-radius:20px;
  padding:24px;
  position:relative;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.card::before{
  content:'';position:absolute;inset:6px;
  border:1px solid rgba(240,196,126,.18);border-radius:14px;pointer-events:none;
}
.card img{width:100%;height:auto;border-radius:12px;display:block;margin-bottom:18px;}
.k-note{
  font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;
}

/* ------------------------------ the footer -------------------------------- */
.foot{
  position:relative;
  z-index:3;
  padding:6vh 26px calc(env(safe-area-inset-bottom) + 26px);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(174,179,210,.5);
  text-align:center;
  line-height:2.2;
}

/* --------------------------- keep the angels close ------------------------ */
.a2hs{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom) + 18px);
  transform:translateX(-50%) translateY(150%);
  width:min(92%, 380px);
  background:rgba(14,17,36,.94);
  border:1px solid rgba(240,196,126,.45);
  border-radius:18px;
  padding:20px 22px;
  z-index:60;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
  text-align:center;
}
.a2hs.show{transform:translateX(-50%) translateY(0);}
.a2hs-t{font-family:var(--serif);font-size:20px;font-weight:500;}
.a2hs-s{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.65;}
.a2hs-x{
  position:absolute;top:6px;right:12px;
  background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;
  line-height:1;padding:6px;
}

/* ================================ desktop ================================= */
@media (min-width:820px){
  :root{
    /* On a wide screen she is not full-bleed: she is a visitation in a much
       larger sky, sized so her wing tips stay inside the frame. */
    --angel-w:40vh;
    --angel-y:42vh;
    --pad-top:8vh;
    /* On a wide screen she is a column of light in a much bigger sky, so
       she dissolves further in from her sides. */
    --angel-feather:14%;
  }
  .words{padding-top:max(52vh, 380px);}
  .wordlight{top:calc(max(52vh, 380px) - 18vh);width:120%;}
  .ask{font-size:clamp(34px, 3vw, 42px);}
  .name{font-size:clamp(44px, 4.4vw, 60px);}
  .sent{font-size:clamp(23px, 1.8vw, 28px);}
  .letter{font-size:clamp(20px, 1.5vw, 24px);}
}

/* ============================== less movement ============================= */
/* She still comes. She simply does not fly, and the sky holds still. */
@media (prefers-reduced-motion:reduce){
  #travel, #bloom, #motes{display:none;}
  .line{
    transform:none;
    filter:none;
    transition:opacity 1400ms ease;
  }
  .words.lit .wordlight{animation:none;}
  .cue .arrow{animation:none;}
  #angel-wrap{transition:opacity 2400ms ease;}
  .a2hs{transition:none;}
}